In this article, we will cover:
How to generate your Web Embed code
You can generate Website Embed code directly through the Editor by clicking "Display" in the bottom left-hand side of the page:
-
Select or search for your personalization on the right-hand side panel and select your Website Embed personalization. These Website Embed personalizations are
* Website Embed
* Mobile App
* Live Event
* Shoppable Instagram
If it’s an old personalization before hyper-personalization, then it will ask you to choose Website Embed or Signage Display, as in the picture below. For displaying your Board, choose Web Embed Display. - Click next
- Open up General and customize your board for the web embed
- Open up Advanced Filters. Here, you have the ability to customize your web embed even further
- Open up Embed Code and you will be able to copy your embed code by clicking Copy to Clipboard
- If you want to view your Website Embed, click on Open in New Tab, which opens the Board preview in a new browser window
- Click Done when you are finished
General options
|
Width |
Choose px or % for the width of your Board |
|
Height |
Choose px or % for the height of your Board |
|
Display Type |
Infinite Scroll: More posts will load as your users scrolls toward the end of your Board Click for More: More posts will load on your Board when the Click More button is clicked Page by Page: A fixed number of posts is shown, with buttons to navigate from page to page.
|
|
# of Columns |
Choose how many columns you want to appear on your Board. If you leave this blank, the number of columns will adjust to the screen size |
Advanced Filter options
|
Select by Saved Filter |
Have a saved filter on your Board, use this on your Embed to customize your board with all the elements we offer in the Filter |
|
Filter by Product |
Filter your Board by Product. Helpful in creating multiple unique displays with different content from a single Board |
|
Filter by Keyword |
Filter your Board by searching keywords. Helpful in creating multiple unique displays with different content from a single Board |
|
Filter by Tags |
Filter your Board by Product. Helpful in creating multiple unique displays with different content from a single Board |
Here's an example web embed:
<script async src='https://www.tintup.com/app/dist/embedded.js'></script><div class="tintup" data-id="article_board" data-columns="" data-expand="true" style="height: 500px; width: 100%;" data-personalization-id="1095729" data-clickformore="true"></div>
Keep this page open whilst you load the community page and copy when needed.
How to Embed your Board inside a Community
You can embed your Board in three different places inside Communities. User Dashboard, activities, and the forum
User Dashboard
- Log in to your Admin account
- Go to Administration in the menu bar
- Click on Dashboard
- Click on Edit in the right-hand corner
- Copy and paste your web embed code into the section TINT. Here, you can also add your own title in the header section
- Click Save to update the Dashboard with the Board
Activity
- Log in to your Admin account
- Click on Mission Hubs
- Click on the Mission you want to add a Board to
- Click on New Activity
- Toggle on TINT
- Copy and paste your web embed code
- Fill in everything else you would like to add
- Click Save
Forum
- Log in to your Admin account
- Go to Administration in the menu bar
- Click on Forum
- Click on Edit in the right-hand corner
- Copy and paste your web embed code into the section of TINT. Here, you can also add your own title in the header section
- Click Save to update the Dashboard with the Board
If you run into any issues embedding your Board, please don’t hesitate to contact Technical Support at support@trueloyal.com.
Comments
Please sign in to leave a comment.