Folloze Website Engager: Embedding a Folloze Board on a Webpage

Jun 3, 2026
Knowledge

Article Body

Please note, this capability is designed for BuyEx3.0 boards

To accelerate website engagement, you can use the Folloze Website Engagement Toolkit to embed an entire Folloze board or only specific sections directly into a website hosting page. This is done using an HTML embedding method, and is not based on iFrame.

Moreover, the Folloze Website Engagement Toolkit enables you to:

Track visitors with deep engagement data, such as content views, visiting time, journey flow and more.
Personalize the experience of visitors leveraging the Folloze identity model and platforms such as 6sense, Demandbase, and Dun and Bradstreet.
Send campaigns directly to the hosting page or directly launching content assets hosted in the board such as documents, videos, articles and more with complete tracking of visitors, including linking to specific assets on the page.
Support Folloze scripts, tracking and SEO.

Before you begin

Build a board in Folloze and include only the sections you want to embed into the hosting page.
Publish the board and test it before embedding.

Embedding your Folloze board on a hosting page

After building your board, you can configure it as embeddable and define its hosting page. Simply copy the board script and paste it on the hosting webpage.
Additionally, you have the option to embed specific sections of the board rather than the entire board.

To set your board as an embedded board:

Select the board you wish to embed on a hosting page.
Go to the board's Settings tab > Access and Security > Embedded Board.
Select the Enable Embedded Board checkbox.
Select the Add board scripts to the hosting page checkbox to include custom scripts configured for this board (e.g., tracking and chat scripts, etc.) on the hosting page.
1. To choose the scripts to add, click Select Custom Scripts.
2. To add all custom scripts from the board, select All Scripts. This is the default setting. All relevant scripts will be added to your hosting page.
3. To add specific scripts, multi-select the scripts from the list.
  Note: If you add specific scripts only, any scripts added later will not be included - unless 'All Scripts' is selected.
Enter the Hosting Page URL. Paste the exact URL where the liveboard will be hosted. For example if your website is “www.folloze.com” and the page you want to serve the liveboard from is “boards“, you need to paste the complete URL as follows: https://www.folloze.com/boards
Copy the script tag and add it to the page header.
1. Copy the script tag and place it at the top of your page’s html head section. The script should look something like this example below. Both the id and api parts are auto-generated. The id part highlighted in green is the board id to embed, while the API part highlighted in orange is the URL of the server to communicate with.
```
<head>
<script id="fz-embed-script" type="module"
src="https://cdn.folloze.com/flz/live-board/dev/embed-script.js?id=29903&api=https://boards.u3-local.folloze.cloud""
data-header-selector="main > h1">
</script>
</head>
```
2. Update the header element. The last part marked in red is not auto-generated and you need to change it manually.
```
“data-header-selector“=main > h1
```
  This part represents a CSS style selector, specifying the html element on the page designated as the header. Floating elements like the item-viewer rely on this information to render themselves beneath the identified header when opened.
  You can also select the header in other ways, for example by the ‘header id’ (if one exists):
```
data-header-selector="#some-header-id"
```
Copy the HTML tag and add it to the page body. This is the live board element itself, which defines where the board/sections will render on the page.
It looks like this:
```
<flz-liveboard-app></flz-liveboard-app>
```

1. When embedding a full board, place it at the desired location.
2. When embedding specific sections only, place it at the top of the page’s body.

Here is a code example:

<body>
  <main>
    <h1 id="some-header-id">here is the page header</h1>
  </main>
  <p>
    some other section above the liveboard
  </p>
  <flz-liveboard-app></flz-liveboard-app>
  <footer>
    <!-- some footer links comes here -->
  </footer>
</body>

Embedding specific board sections

To embed specific board sections, go to the board’s designer.
1. In the board’s Designer, open the three-dot icon in the top bar of the section you want to embed.
2. In the dropdown, click Copy HTML Tag to copy the embed code.
3. Paste the copied HTML tag into the desired location on your website.
To include all the scripts that were configured for this board such as tracking script, chat scripts and others in the hosting page, select Add board scripts to the hosting page.
To copy the generated board script, click Copy Script. This is an auto generated script that consists of two parts: a script to place in the header and a Folloze tag to place in the body.

Best Practices for embedding board sections

The hosting page is responsible to ensure sections display at the correct width.
Avoid adding sections with navigation headers that contain anchors, or including anchors within embedded sections.
The order of sections on the webpage may differ from their order on the board.
You can embed sections from both the registration and main pages of a board. However, note that you will not experience the full registration page flow that directs to the main page.
When embedding a Folloze board or section, the content loads dynamically after the page has already rendered. If no space is reserved in advance, this may cause the page layout to shift as the content loads.

To prevent this behavior, we recommend applying a minimum height (min-height) to the existing element that contains the flz-liveboard-app component. By reserving sufficient space ahead of time, the page layout remains stable while the board loads, resulting in a smoother and more consistent viewing experience.

Example:
```
<div style="min-height: 1000px;"> <flz-liveboard-app></flz-liveboard-app> </div>
```
Recommended minimum heights:
- Full board embed: min-height: 1000px
- Single section embed: min-height: 500px
Note: These values are general guidelines only. You can adjust the minimum height based on the structure of the embedded section, the amount of content, and the design of the hosting page.

Board links

After configuring the embedded board, all board links will direct leads to the hosting page URL rather than the board URL. All the features related to Folloze links, campaign links, group links, trackable links, are all supported with this new page.

For more information on board links, read the article Sharing Board Links.

Content item links

A key feature of the Folloze Website Engager is the ability to navigate directly to a Folloze content item. This can be used in nurture campaigns or for sales development that allows the hosting page to become a content destination.

Folloze supports two ways to navigate directly to content items placed on the board:

As URL parameter (recommended) - this will place the item information as a URL parameter in the following format:
```
https://<hosting page>?flz-category=<category_url>&flz-item=<item_url>
```
Here is an example of such a URL:
https://www.folloze.com/boards?flz-category=overview&flz-item=modomind_intro_video

This method is simple and doesn’t require any further configuration of the web server and can be activated by selecting the option Enable navigation using URL parameter.
As a subpage under the hosting page - this will add to the URL route for the category and then the item url in the following format:

https://<hosting page>/<category_url>/<item_url>

Here is an example of the URL:
https://www.folloze.com/boards/overview/modomind_intro_video

This option presents a cleaner URL. However, there are certain requirements to fulfill. The Folloze live board functions as a single page application (SPA), allowing you to navigate to other pages within the same page. This means your web server should redirect all pages under the hosting page to the same page. The Folloze system knows to open the correct webpage.

For example, if a lead lands on the URL:
https://www.acme.com/some-great-buyer-experience/some-item

The hosting site should load the following page instead:
https://www.acme.com/some-great-buyer-experience

There are several ways to achieve this. If you are using Wordpress, one approach is to use a .htaccess file with rules similar to the following:

RewriteEngine on

RewriteCond %{REQUEST_FILENAME} !-f

RewriteCond %{REQUEST_FILENAME} !-d

RewriteRule ^some-great-buyer-experience(/[a-z]+)+$ some-great-buyer-experience/index.html [L]

Analytics data

When a lead visits the hosting page, the analytics data will indicate the lead’s activity as 'Viewed page', providing details on the specific webpage the lead visits

If you are still using a U2 board on a webpage, contact Folloze Support.

Have questions?

Ask our support team: https://help.folloze.com/s/contactsupport

Article Created Date

4/24/2025 1:16 PM

Title

Folloze Website Engager: Embedding a Folloze Board on a Webpage

URL Name

Folloze-Website-Engager-Embedding-a-Folloze-Board-on-a-Webpage

Zendesk Article ID