FAQ website integration & interfaces
    • PDF

    FAQ website integration & interfaces

    • PDF

    Article summary

    How do I integrate the selector on a website?

    To embed the selector in the desired position (e.g. as a WordPress plugin, Jimdo extension, etc.), please use the code snippet below (recommended). Follow the instructions for your specific platform:

    <script
    id="foxbase-selector-bootstrap"
    src="https://digitizer.app/selector/index.js"
    data-selector-id="ID OF THE SELECTOR"
    data-scroll-adjust="0"
    data-lang="LANGUAGE PARAMETER, e.g. de_DE">
    </script>
    • data-selector-id: Instead of "ID OF SELECTOR", enter your selector ID, e.g. like this: "CEC10FA0-1298-11EB-8AA0-1948C3074C4C".

      You can see your selector ID in your FoxBase URL. You can also copy these from the top menu bar:

    • data-lang: Enter the language of the selector (e.g. de_DE for German, en_EN for English, fr_FR for French etc.)

    Alternatively, you can also integrate the selector as an iFrame:

    <iframe id="responsive-iframe" 
    src="SELECTOR URL" 
    width="100%" 
    height="1000px" 
    name="Selector-Name" 
    title="Selector-Title"> 
    </iframe>
    • src: Enter the URL of your live selector under "URL OF SELECTOR" (not that of the staging selector). You can find the URL by activating the Live-View toggle and clicking on the launch icon at the top right.

    • width and height: Determine the width and height of the iFrame.

    • name: Optional specification of a selector name. This is not visible.

    • title: Enter a title. This is visible after integration when hovering with the mouse.

    How do I integrate embed parameters into the snippet code?

    If you use embed parameters in your selector to target specific content, you can add these to both the snippet and the iFrame. This ensures that the selector reflects the properties of the parameter.

    Use the following code for the implementation via snippet:

    <script
    id="foxbase-selector-bootstrap"
    src="https://digitizer.app/selector/index.js"
    data-selector-id="SELECTOR ID"
    data-scroll-adjust="0"
    data-lang="de_DE"
    data-embed-parameters="Parameter-Name">
    </script>
    • data-embed-parameters: Enter your user-defined embed parameter. Make sure you use the same spelling as in the workbench. If you implement more than one parameter, separate them with a comma and a space:

      • data-embed-parameters="Parameter-1", "Parameter-2"


    Use the following code for the implementation via iFrame:

    <iframe
    id="responsive-iframe"
    src="SELECTOR URL"
    width="100%"
    height="1000px"
    name="Selector-Name"
    title="Selector-Title"
    data-embed-parameters="Parameter-Name">
    </iframe>

    Why does the selector not load after the integration on the website?

    It is possible that the URL has not yet been activated. Every domain you want to implement the selector in must be approved in advance by FoxBase via whitelisting. In this way, your selector is securely embedded and protected from unwanted use by third parties. Request whitelisting from your personal CSM support.

    How long does whitelisting take?

    As a rule, your domain will be activated within one day. Let your CSM support know at least one week before the planned go-live.

    How do I integrate the selector via an interface (API)?

    You have the option of integrating your selector into your system via an interface, for example for the integration of chatbots or the creation of an individual front end. You can find detailed technical documentation in this Postman article.

    Which cookies does FoxBase use?

    The platform does not use cookies. Selector users' requests are recorded anonymously and only the technically necessary data is stored in the browser to ensure a pleasant user experience. Only the person responsible for processing has access to this data.

    The following data is stored in the local and session storage:

    Local Storage:

    • User input (key: foxbaseProductSelectorData-v7-<selector-id>): Storing anonymized data to pre-set the questionnaire for future visits. FoxBase cannot access this data.

    • Locale: Saves the language in which the selector was last opened.

    • ScrollAdjust: Saves the value by which the page was scrolled down.

    • AuthToken: Linking of actions with the user session.

    • selectorID: Storage of the ID of the selector used (will be removed soon).

    • __anon_id: Linking of analysis events with a user through the analysis library.

    Session Storage:

    • InitialLoad: Check whether a selector was loaded for the first time during the current session.


    Was this article helpful?