How to Embed a Board into a Community

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:

  1. 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.
    Old_Personalization_Workflow.gif
  2. Click next
  3. Open up General and customize your board for the web embed
  4. Open up Advanced Filters.  Here, you have the ability to customize your web embed even further
  5. Open up Embed Code and you will be able to copy your embed code by clicking Copy to Clipboard 
  6. If you want to view your Website Embed, click on Open in New Tab, which opens the Board preview in a new browser window
  7. 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

mceclip1.png

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

Web_Embed_Display_Options.gif

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

  1. Log in to your Admin account
  2.  Go to Administration in the menu bar
  3. Click on Dashboard
  4. Click on Edit in the right-hand corner
  5. Copy and paste your web embed code into the section TINT.  Here, you can also add your own title in the header section
  6. Click Save to update the Dashboard with the Board

Dashboard - How to add TINT to a Vesta Community - 4th August 2023.gif

Activity 

  1. Log in to your Admin account
  2. Click on Mission Hubs
  3. Click on the Mission you want to add a Board to
  4. Click on New Activity
  5. Toggle on TINT
  6. Copy and paste your web embed code
  7. Fill in everything else you would like to add
  8. Click Save

Activity Page - How to add TINT to a Vesta Community - 4th August 2023 (1).gif

Forum

  1. Log in to your Admin account
  2.  Go to Administration in the menu bar
  3. Click on Forum
  4. Click on Edit in the right-hand corner
  5. Copy and paste your web embed code into the section of TINT.  Here, you can also add your own title in the header section
  6. Click Save to update the Dashboard with the Board

Forum - How to add TINT to a Vesta Community - 4th August 2023.gif

If you run into any issues embedding your Board, please don’t hesitate to contact Technical Support at support@trueloyal.com.

Was this article helpful?
0 out of 0 found this helpful

Comments

0 comments

Please sign in to leave a comment.