Skip to main content

Embedding

In this section, we will handle everything about embedding an iframe. From the basics to more advanced options like, how to customize the configurator page.

Basics​

A basic iframe integration without any interaction with your website can be done with just a single HTML tag.

For example, the following URL shows a demo model.

basic.html
<iframe src="https://expivi.expivi.net/product/chair"></iframe>

This is fine, but this page was not made with iframe integrations in mind. Therefore it might look cramped if you want to embed it in just a small part of your website. But more importantly, it does not offer any way to communicate with the page when embedded in an iframe.

To fix this you can add /embed to the end of the url. This will remove the header and footer of the page as well as some other buttons. But also implements Expivi's iframe library which allows for communication with the page inside an iframe.

embed.html
<iframe src="https://expivi.expivi.net/product/chair/embed"></iframe>

Interacting With Your Website​

If you want the configurator to interact with your webshop, we have a library that can ease communication between your website and the iframe. Your website will be able to react to certain actions that users might take inside the iframe, like for example letting you know when a customer presses 'add to cart.'

The embed page already has this library integrated into it and sends a few events:

  • v1.ready
  • v1.add-to-cart
  • v1.price-changed

The page also responds to v1.save-current-config events from the parent.

Learn how to integrate the library into your website here.

URL Parameters​

The configurator and embed page support a couple of URL (query) parameters to be passed to customize the page or product.

Action​

Passing the action parameter to the page will show a button with the text of the action parameter

?action=Add%20to%20Cart

Show Price​

The show_price parameter enables the price to be displayed inside the iframe.

note

This is a boolean parameter, a value is not needed.

?show_price

Preset Id​

A preset id is the identifier of a preset made in the Backoffice.

Learn more about presets here

?preset_id=an-identifier

For example: https://expivi.expivi.net/product/chair/embed?preset_id=documentation-preset