Home / Get Started / Integrate Into Your App / Embed Your Customer Hub

Embed Your Customer Hub

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:

  1. Insert <iframe> into your product

  2. Include and initialize clove-embed.js

  3. Insert helper script into your hub

Let's jump into it.

Embed IFrame + JS

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.

Your hub will be displayed with just this IFrame, but it's not ideal because the user cannot link to pages of your hub directly. We provide JavaScript that persists the IFrame page in the URL bar. Add it to your application like so:

View Code Snippet

Add Script 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:

View Code Snippet

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.