In this article, we will cover:
How to generate your Web Embed code
You can generate Website Embed code directly through the TINT 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 TINT board, choose Signage Display. - Click next
- Open up General and customize your TINT 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 TINT board preview in a new browser window
- Click Done when you are finished
General options
Width |
Choose px or % for the width of your TINT board |
Height |
Choose px or % for the height of your TINT board |
Display Type |
Infinite Scroll: More posts will load as your users scrolls towards to the end of your TINT board Click for More: More posts will load on your TINT 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 TINT board. If you leave this blank, the amount of columns will adjust to the screen size |
Advanced Filter options
Select by Saved Filter |
Have a saved filter on your TINT board, use this on your Embed to customize your board with all the elements we offer in Filter |
Filter by Product |
Filter your TINT board by Product. Helpful in creating multiple unique displays with different content from a single TINT board |
Filter by Keyword |
Filter your TINT board by search keywords. Helpful in creating multiple unique displays with different content from a single TINT board |
Filter by Tags |
Filter your TINT board by Product. Helpful in creating multiple unique displays with different content from a single TINT 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 TINT community page and copy when needed.
How to Embed your TINT board inside a TINT Community
You can embed your TINT board in three different places inside TINT Communities. User Dashboard, activities, and the forum
User Dashboard
- Log into 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 of TINT. Here you can also add your own title in the header section
- Click Save to update the Dashboard with the TINT board
Activity
- Log into your Admin account
- Click on Mission Hubs
- Click on the Mission you want to add a TINT 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 into 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 TINT board
If you run into any issues embedding your TINT, please don’t hesitate to contact Technical Support at support@tintup.com.
Comments
Please sign in to leave a comment.