Classic integration

👩‍💻 Tutorial video

1. Access the Integration Tab

Navigate to the 'Integration' tab from your widget details.

2. Copy the widget code.

Click on the 'Copy' button to copy the widget code.

You need to publish your widget once before you can access the integration code.

3. Paste the integration code onto your website.

After copying the code of your widget, paste it directly at the desired location in your website's code.

You have the option to modify the appearance of your widget, such as color, borders, and covers, from the 'Settings' tab.

Click on the 'Publish' button to update your changes directly on your site.

If you want to change the type of the widget (sticky, standalone, embed...), you will need to create a new widget.

For more advanced integration, you can separate the script from the div and paste the script into the head of your site.

Then all you have to do is paste the div where you want it.

Dynamic integration

Please note that this type of integration requires a developer.

What is the unique widget integration?

Dynamic integration allows different widgets to be displayed on different pages via one single integration on the page template.

This means you can edit your own content directly from the JOIN tool.

The code must be integrated into all the product pages where you want the widget to appear, in the location that has been agreed with your team.

How does it work?

Dynamic integration allows different widgets to be displayed on different pages via one single integration on the page template.

This means you can edit your own content directly from the JOIN tool.

The code must be integrated into all the product pages where you want the widget to appear, in the location that has been agreed with your team.

Please note that all widgets will need to have the same shape and size. To avoid CLS, start from the default widget script.

In the widget integration tab, retrieve the widget integration code.

Edit the last script tag to replace it with the following code:

<script>
const domainName = "MY_DOMAIN_NAME";
const alias = "MY_ALIAS";
const defaultAlias = "MY_DEFAULT_ALIAS";
const divId = "MY_DIV_ID";

const loadWidget = (alias) => {
const script = document.createElement("script");
script.src = `https://${domainName}/widgets/${alias}/index.js`;
script.setAttribute("data-join-widget-id", divId);
script.setAttribute("data-join-widget-alias", alias);
script.setAttribute("type", "text/javascript");
script.onerror = () => {
if (defaultAlias && alias !== defaultAlias) {
loadWidget(defaultAlias);
}
}

const div = document.getElementById(divId);
if (div) {
div.appendChild(script);
}
}

loadWidget(alias);
</script>

In the code provided, you will have to replace several :

MY_ALIAS
MY_DOMAIN_NAME
MY_DEFAULT_ALIAS
MY_DIV_ID
MY_DOMAIN_NAME is replaced by your JOIN domain name, which you can easily find in the script for one of your widgets.

MY_DEFAULT_ALIAS must replaced by the alias of the widget to be displayed if no widget has been created for the page.
MY_DIV_ID must be replaced by the id of the div copied in the initial code.

MY_ALIAS must be replaced by a unique identifier for the page, such as its slug.

Any identifier will do. We recommend using the slug because it's easier for the person creating the content to retrieve it afterwards.

Once the code has been integrated, all you have to do is create a new widget using the page identifier as an alias for the widget:

Remember to re-use the same widget shapes and sizes to avoid CLS. You can duplicate an existing widget to ensure that the design is the same.

The widget will appear on your web page as soon as you publish it.