How can we help?

Embed selector in website

You are here:

The selector can be on a any website or landing page or in a CMS integrated become. This can be done as a snippet or iFrame integration.

info

Absolutely necessary: Selector whitelisting

Regardless of which type of integration you choose: Every website on which you want to implement your selector must be activated by FoxBase in advance via Whitelisting In this way, your selector is securely embedded and protected from unwanted use by third parties. Please request whitelisting from your personal Customer Success Manager. As a rule, activation takes place within one day. However, please let us know at least one week before the planned go-live.


Integration as a snippet

To embed the selector in the desired position (e.g. as a WordPress plugin, Jimdo extension, etc.), please use the one below 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">

All parameters except 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">

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 Selector URL with Selector ID
  • data-scroll-adjust: This sets the distance to the header. Ideal for floating headers.
  • data-lang: This parameter can be used to set the language if translations are available. You can also see 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 sent via the selector URL as iFrame to be integrated:

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

Explanation of the iFrame parameters

  • ID: An iFrame id can be added optionally.
  • src: The entire URL with which your selector is called must be inserted here. An example is the Selector URL shown in the image above.
  • width and height: For iFrame integration, the width and height of the iFrame must be specified. This can be done via "width" and "height" or by means of
    style="width: 100%; height: 500px; border: 0px; outline: 0px;"
  • name and title: Optionally, a name and title of the selector can be added.

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:



iFrameResize({ log: false }, '#the iframe id');

Replace the element "the iframe id" with the ID of the iframe. It is important that you use the hashtag "#" not removed. The iFrame then automatically adapts to the height of your selector.


Example of integration into WordPress via snippet:

Paste the code snippet in the appropriate place on the webpage where you want it to appear.

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!
ContactPage

info

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