Gå til hovedinnhold

Embed unit selector

Skrevet av Lisbeth Berg

OBS: If you want to use a custom domain on the unit pages, you must set the domain before completing these steps..

The following code snippets are used for embedding the unit selector:

  1. Web component for unit selector – to be added in the HTML on the page where the unit selector should be displayed:

    <kvass-flatfinder
            project-url="{Project Url}"
            project-id="{Project ID}"
            path-prefix="/residential"

    />

  2. This script tag is added in the footer / as far down on the page as possible:

    <script type="module" src="https://unpkg.com/@kvass/widgets@latest/dist/flatfinder.js"></script>

  3. Possible css styling options (optional):

    -Filter options:

    :root{
      --kvass-flatfinder-filter-background: #511629;
      --kvass-flatfinder-filter-contrast: white;
      --kvass-flatfinder-filter-border-color: #ff978f;
      --kvass-flatfinder-filter-background-hover: #ff978f;
      --kvass-flatfinder-filter-border-radius: 10px;
    }

    -Flatfinder color options: 

    kvass-flatfinder{
    --flatfinder-color-error: #ff0000; //status sold
    --flatfinder-color-success: #00ff8a; //status for sale
    --flatfinder-color-warning: #e9ab05; //status reserved

    }

  4. Enable unit list (optional):

    Set: show-residential-list="true" to display list.

    <kvass-flatfinder
            project-url="{Project Url}"
            project-id="{Project ID}"
            path-prefix="/residential"
            show-residential-list="true"
    />

  5. Styling the list:

    :root{
      --kvass-flatfinder-list-odd-background: #fdf4e8;
      --kvass-flatfinder-list-even-background: #fbecd9;
      --kvass-flatfinder-list-color: #032c38;
    }

  6. Set the main URL to allow users to navigate back to the embed page from any unit subpage.
    Project -> Design and theme -> Page settings

  7. Options:

    For render relations in top

      relation-placement="top"
Svarte dette på spørsmålet?