Skip to main content

How do I integrate the configurator on my website or store?

Requirements​

Integration​

You would of course like to use the configurator in your website or store.

  • Click on "Options" in the left sidebar, then on "Embed"
  • You will be shown the options:
    • The technical integration: web component (recommended), IFrame or link
    • Do you want to start with a defined configuration? (=Inspiration)
    • Do you want to use the configurator yourself or one of your Händler?
    • In which Sprache should the configurator be displayed?
  • Once you have made your selection, the code that you need to insert into your website will be displayed on the right.

In the following, we will discuss the details, advantages and disadvantages of the individual options:

The K3 can be used directly as an HTML element <k3-view> on any page. This allows the configurator to be fully integrated into the layout - without cross-origin restrictions or visual breaks.

A simple HTML tag is all that is needed for integration:

<k3-view app="mein-app-code"></k3-view>

Alternatively, an inspiration code can be used instead of an app attribute can be used:

<k3-view code="inspirations-code"></k3-view>

All additional attributes that would otherwise be in the configurator URL can be passed to the tag (e.g. lang, dealer, etc.)

The K3 JavaScript must be loaded for the HTML element to be available.

<script type="module" src="https://k3.objectcode.de/app/index.js"></script>
info

In extensions such as Veranda, a different script must be used - check the embedding help.

Advantages:

  • Optimal embedding in your site, no media discontinuity.
  • Full SEO relevance and tracking sovereignty.
  • The user remains on your site.
  • The address of the configurator is not visible.

Disadvantage:

  • None

Integration via IFrame​

tip

An IFrame is the technical possibility to display one web page within another.

You can display the configurator on a page of your shop/your website. To do this, you can select any page or create a new special page, e.g. /konfigurator.

On the page, insert the code that is displayed as an IFrame under Options in the Embedding tab. You can normally do this in your web editor with a generic HTML element. The code looks something like this:

<iframe id="k3"
    frameBorder="0"
    title="Object Code - iFrame"
    width="100%"
    height="100%"
    allow="fullscreen"
    src="https://k3.objectcode.de/app/?app=2d01a48d-85a4-4f8e-938f-3208b4bd70b9"
    style="border:none;overflow:hidden;">
</iframe>

The individual lines mean the following:

  • <iframe>: Is the technical command for displaying another website.
  • frameBorder="0": No frame should be shown around the configurator.
  • title="Object Code - iFrame": Is optional - the title is not displayed.
  • width="100%": The configurator takes up the entire available width.
  • height="100%": The configurator occupies the entire available height.
  • allow="fullscreen": The configurator may be displayed in full-screen mode.
  • src=...": This is the actual address of the configurator page
  • style="border:none;overflow:hidden": No frame is shown (newer browsers). And everything that is too large to display is hidden.

You should pay particular attention to width and height. 100% assumes that the surrounding elements specify the dimensions. This is usually not a problem for the width, but it is for the height: The configurator is designed in such a way that it should fill the screen as completely as possible. If it doesn't do this, the user may have to scroll and may come into conflict with the 3D display. This leads to difficulties in operation and should be avoided.

What is usually desired is a page-filling display below the page header. You can achieve this by giving the surrounding element this height using CSS:

height: calc(100vh - 80px);

100vh is the screen height, 80px is the height of the header (you must adjust this). Attention - in some browsers the spaces around the - are important!

They can also give this height directly to the IFrame:

<iframe id="k3"
    frameBorder="0"
    title="Object Code - iFrame"
    width="100%"
    allow="fullscreen"
    src="https://k3.objectcode.de/app/?app=2d01a48d-85a4-4f8e-938f-3208b4bd70b9"
    style="border:none;overflow:hidden;height: calc(100vh - 80px);">
</iframe>

After integration, check the Pagespeed-Index of the page. A 3D configurator naturally takes a while to load - this affects the performance measurement.

Advantages:

  • The user remains on your site.
  • The address of the configurator is not visible.

Disadvantage:

  • The connection is technically a little more complex.
  • The loading time is charged to your website.

Of course you can simply link to the configurator on your website (in your store). To do this, simply set a link to the address of the live version.

The way back to your store works via the Abschluss-Aktionen: In the configurator, there are buttons to request the configuration from you by e-mail or to add it to the shopping cart to the shopping cart. In the latter case, the user ends up back in your store.

You can choose whether you want to open the configurator in a new tab or whether it should replace your website, you can choose freely. Your web editor will offer options for this.

Advantages:

  • integration is simple
  • use is optimal - especially on mobile devices, as the configurator can use the entire page and there are no disruptions in scrolling behavior.

Disadvantage:

  • the user feels like they are leaving your site
  • the address of the configurator is visible in the address bar

Loading animation​

If the configurator is embedded in a page via web component or IFrame, it sends events, when loading is started and finished.

To do this, the surrounding page must listen for so-called IFrame events (as with the Shop-Anbindung):

window.addEventListener("message", function (event) {
      if(event.data.type == "K3FullyLoaded"){
          console.log("Received message: " + event.data.code);
          // hier den Event bearbeiten. Z.B. ein Bild über den Konfigrator-Iframe blenden.
      }
  }, false);

The phases are included:

  • First, the app itself is loaded. During this time, a loading animation is shown by the K3 itself.
  • Now the event K3AppLoaded is sent.
  • Now the K3 starts to load all the data, the configurator, the inspiration if applicable and all the models and images.
  • When this is complete, the event K3FullyLoaded is sent.