Contents x
    Integrate selector into website
      • PDF
      Contents

      Integrate selector into website

        • PDF
        Article summary

        The selector can be integrated in any website or landing page or in a CMS. The options are snippet or iFrame integration.

        ⚠️FoxBase must activate each selector domain via whitelisting. In this way, the selector is protected against unwanted use by third parties. Request whitelisting from CSM support. It is usually activated within one day. However, please inform us at least one week before the planned go-live.

        Integrate selector as snippet

        1. Copy the following code into a text document.

        <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="de_DE">
</script>

        1. Copy the selector ID either from the URL or by clicking on the icon Copy selector ID to clipboard.

        1. Add the selector ID next to data-selector-id.

        2. Optional: Change the distance of the selector to the screen border by entering a pixel value after data-scroll-adjust. This is relevant for instance when you use floating headers.

        3. Optional: Change the language of the integrated selector by entering the language parameter after data-lang (e.g. en_EN, fr_FR etc.).

        4. Place the snippet at the desired location on the website.

        Example:

        <script
id="foxbase-selector-bootstrap"
src="https://digitizer.app/selector/index.js"
data-selector-id="24256D40-F530-11EB-86C6-D3DF652D3632"
data-scroll-adjust="0"
data-lang="de_DE">
</script>

        Integrate selector as iFrame

        1. Copy the following code into a text document.

        <iframe id="responsive-iframe" 
src="URL OF SELECTOR" 
width="100%" 
height="1000px" 
name="Selector name" 
title="Selector title"> 
</iframe>

        1. Copy the URL of the live selector and enter it behind src (e.g. https://digitizer.app/selector/#!/24256D40-F530-11EB-86C6-D3DF652D3632/en_EN/)

        2. Optional: Enter an iFrame ID behind iframe id.

        3. Optional: Enter the selector name after name and title.

        4. Place the iFrame at the desired location on the website.

        Example:

        <iframe id="responsive-iframe" 
src="https://digitizer.app/selector/#!/24256D40-F530-11EB-86C6-D3DF652D3632/en_EN/questionnaire/0" 
width="100%" 
height="1000px" 
name="Colour-Selector" 
title="Colour-Selector"> 
</iframe>

        Adjust iFrame size

        Adjust height and width manually

        1. Enter the desired width in percent after width in the iFrame code.

        2. Enter the desired height in pixels behind height.

        <iframe id="responsive-iframe" 
src="URL OF SELECTOR" 
width="100%" 
height="1000px" 
name="Selector name" 
title="Selector title"> 
</iframe>

        Alternative code for additional customization of the frame:

        <iframe id="responsive-iframe" 
src="URL OF SELECTOR" 
style="width:100%;height:500px;border:0px;outline:0px;"
name="Selector name" 
title="Selector title"> 
</iframe>

        Automatically adjust height

        To make the iFrame dynamically adapt to the height of the selector, carry out the following steps:

        1. Add the following code below the iFrame:

        <script src="https://cdn.foxbase.de/files/js/iframeResizer.min.js"></script>
<script> 
iFrameResize({ log: false }, '#the iframe id'); 
</script>

        1. Replace the element the iframe id with the ID of the iFrame.

        ⚠️Do not remove the hashtag (#).

        Was this article helpful?
        What's Next