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
  1. Include and initialize clove-embed.js
  1. 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. The element ID must be clove-embed-iframe:

<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.

If your hub has a different design when it's inside of an IFrame, we recommend placing the following script in the header template of your hub:

View Code Snippet

Featured Post

Success programs and product come together to create a complete customer experience. It's important to build healthy relationships between these departments in order to create a unified customer experience.