The Folloze boards can now be embedded in your website as a seamless solution to incorporate pieces of content to your site.
To embed a board on your website follow these steps:
- In the board navigate to the Editor tab -> General tab and scroll down to Inbound Settings
- Change the “Enable embedded board” toggle to “on”. Notice that when this setting is “off” the board will not be able to be embedded.
- Once “Enable embedded board” setting is “on”:
- You will see a text area containing the embedding script for your specific board. Copy the script and add it to the web page where you want your board to be embedded inside the “body” tag.
- All the board elements (Header, Banner, Footer, Promotion Area) will be automatically hidden except for the items - you may change these configurations in each of the elements setting to fit your design preferences.
- Add the following html element where you want the board to be embedded inside the page - <div id="folloze-board"></div>
Note: Each item and board search results will receive a unique URL. Every script is customized to your board.
When an item is viewed, the item viewer can expand to fit the entire screen.
In order to get this experience follow the next styling instructions:
- Make sure that the Folloze element is positioned in the page in a way that it can receive a higher “z-index” property than other elements in the page (f.e header/footer).
- In case the item viewer is not opening as expected, make sure all of its ancestors don’t have a "transform" attribute set.
If you prefer that the item viewer won’t cover the website’s header, you may add the “headerHeight” parameter when calling the “init” function as following (f.e the header’s height is 60px):
follozeBoardUrl: "[your board’s public link]",
When embedding a board you’ll need to consider the SSL definitions of the board:
- If your website is configured with SSL certificate and has an “https” URL the board would need to have the “https” configuration activated
- If your board is activated with “https”, all link items on the board need to be “https” compliant as well, as streaming “http” items will not be available. Make sure to go over your boards to check that they don't contain http links. if they do, they need to be configured to open in a new tab or to be removed.