How can we help?

Include Selector in web page

You are here:

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.e
ata-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:
Screenshot of the Selector URL with Selector ID
  • 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.

Was this article helpful?
How can we improve this article?
How Can We Improve This Article?
Table of Contents

Contact

We look forward to your inquiry about the Digital Product Selector. Let's digitize B2B sales together in a sustainable way!
footer

info

mailkontakt@foxbase.de
phone+49 211 1586 4066
addressOststrasse 10, 40211 Düsseldorf