How can we help?
Include Selector in web page
The Selector can be integrated into any web page or landing page or into a CMS. This can be done as a snippet or iFrame integration.
Integration as a snippet
To embed the Selector (e.g. as a WordPress plugin, Jimdo extension, etc.), please use the code snippet below to insert the Selector at any position: Code snippet:
<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>
All parameters, except for the data-selector-id, are optional. A shortened version is:
<script
id = "foxbase-selector-bootstrap"
src = "https://digitizer.app/selector/index.js"
i.eata-selector-id="ID OF SELECTOR">
</script>
Explanation of the snippet parameters
- data-selector-id: The ID of the selector must be inserted here. The selector ID can be found in the URL:
- data-scroll-adjust: This defines the distance to the header. Ideal for floating headers.
- data-long: This parameter can be used to set the language if translations are available. You can also recognize the language of your selector, for example en_EN for English or de_DE for German, in the URL ending.
Integration as iFrame
Alternatively, the selector can also be saved as an iFrame :
<iframe
id = "responsive-iframe"
src = "URL OF THE SELECTOR"
width = "100%"
height = "1000px"
name = "selector name"
title = "Selector Title">
</iframe>
Explanation of the iFrame parameters
- id: An iFrame id can optionally be added.
- src: The entire URL with which your selector is called must be inserted here. An example is the selector URL shown in the picture above.
- width and height: For the iFrame integration, the width and height of the iFrame must be specified. This can be done using "width" and "height" or using
style = "width: 100%; height: 500px; border: 0px; outline: 0px;" - name and title: Optionally, a name and a title can be added to the selector.
Auto adjust iframe height
If you embed your selector via iFrame, the content will be loaded into a window within your website. In order for the iFrame to dynamically adapt to the height of the selector, insert the following code under the iFrame:
<script src="https://cdn.foxbase.de/files/js/iframeResizer.min.js"></script><script>
iFrameResize({ log: false }, '#the iframe id');
</script>
Replace the element "the iframe id" with the ID of the iframe. It is important that you use the hashtag "#" Not remove. The iFrame then automatically adapts to the height of your selector.
Example of the integration in WordPress via snippet:
Paste the code snippet in the appropriate place on the website where you want it to be seen.
