You can embed your complete customer hub into your product. This is a great way to provide your content, ticketing, or videos to your users without requiring them to leave your application. Follow these 3 steps to get connected:
<iframe> into your product
Include and initialize clove-embed.js
Insert helper script into your hub
Let's jump into it.
We suggest that you embed your hub on a dedicated page. However, you can include the following IFrame anywhere in your application. Add the following IFrame where you want it, and style it to the correct size and appearance. Note that the ID is very important here:
<iframe id="clove-embed-iframe" src="https://yourhub.example.com?force_login=true"></iframe>
The force_login=true parameter will automatically take any logged-out users through your login flow. Because they're already logged into your application, they will immediately be logged in and taken to your hub.
There is a small change that needs to be made in your hub in order to power the clove-embed.js script. Add the following script to the head template, found in your hub's theme editor:
This script broadcasts when a page is loaded inside of an IFrame. The clove-embed.js script picks this up and uses it to keep the URL bar in sync.
If your hub has a different design when it's inside of an IFrame, then we recommend placing the following script in the header template of your hub: