Do you want to integrate Expivi, but do not wish to use an e-commerce platform such as Woocommerce or Shopify? Using an iFrame might be the solution. This page will describe how to integrate Expivi via iFrame.
1. Basic Setup
For basic usage of the viewer + options, the iFrame has very easy implementation. To start off, you’ll need two pages (it is not required to have the pages on the same domain, but due to security reasons it is highly recommended). Firstly, follow the Expivi viewer + Options integration document found on our knowledge website here.
Once this page has been setup, you’ll only need only 1 line of code in the second page:
<iframe src="https://www.example-website.com/expivi-viewer" id="myExpiviIframe" frameborder="0" width="100%" height="100%" allowfullscreen></iframe>
The iFrame will act as a window to the other page.
2. Communication between Expivi viewer and iFrame
Showing the viewer and/or options is easy to setup, but it understandable if you would like to have some communication in place between the viewer and the iFrame. For example, if the iFrame is used within a product page of a shop, you might want to save the product configuration within the product data once it is added to the cart.
The following implementation will attach a small script to the ‘add-to-cart’ button which will block the event temporarily. During this blockade, an event is being sent to the iFrame page requesting the product configuration. Once the configuration is ready, an event is sent back to the product page containing the configuration and the original event. The configuration will be attached to the event, followed by the event that removes its blockade, and continues the ‘add-to-cart’ action.
This setup might require some changes in how products are added to the cart as the ‘add-to-cart’ action will now provide Expivi product configuration data.
Implement the following code in the product page:
Implement the following code in the iFrame page:
Since 4th of February 2020, chrome will block cookies coming from third-party websites by default. This means that cookies might be blocked between the product page and iFrame page/Expivi services (depending on if the iFrame page is setup on a different domain). It is recommend to check the SameSite setting on your server. Here is a website explaining the SameSite issue: https://web.dev/samesite-cookies-explained/
You have now successfully integrated Expivi as an iFrame!