In this article, we will cover:
- TINT Embed Code Elements
- Embed Parameters
- Advance Embed Parameters
- Embed Customization Parameters
- UTM Tracking Parameters
TINT Embed Code Elements
The TINT Embed Code contains two elements: A <script> and a <div>. The <script> cannot be modified in any way, but looks something like this:
<script async src='https://www.tintup.com/app/dist/embedded.js'></script>
The <div> element contains various parameters that specify how your TINT will be displayed. It looks something like this:
<div class="tintup" data-id="test_for_personalization_publish_button" data-columns="" data-expand="true" style="height: 500px; width: 100%;" data-personalization-id="1084467" data-saved-filter-id="29688" data-infinitescroll="true"></div>
- data-id - specifies the name of the TINT
- data-columns - specifies the number of columns (if not set, then TINT will automatically decide the optimal number of columns to show)
- data-expand - if set to "true" (default) then the height of the TINT embed will expand when users scroll down to load more posts. Any content below the TINT embed will be pushed down on the page. If set to "false" then the height of the TINT embed will remain fixed, with a small scrollbar appearing on the right-hand side of the frame.
- data-infinitescroll - if set to "true" (default Display Type) more posts will load automatically on the TINT as you scroll down.
- data-personalization-id - specifies the personalization to display
- style - specifies the height (500px default) and width (100% default) for the embed
Advanced Embed Parameters
- data-clickformore - if set to "true" (Click For More Display Type) more posts will load on your TINT when a button is clicked.
- data-paginate - if set to "true" (Page By Page Display Type) a fixed number of posts are shown, with buttons to navigate from page to page.
- data-count - if set to a positive integer it will determine how many posts to initially load on your TINT (Page By Page only).
- data-noButtons - If set to “true” will hide Page buttons (Page By Page only)
- data-query - specifies Keyword Filtering on the TINT.
- data-form - to show a set date range (in seconds)
24 hours =
data-from="-86400"- the TINT board will only show posts from the last 24 hours
7 days =
data-from="-604800"- the TINT board will only show posts from the last 7 days
30 days =
data-from="-2629800"- the TINT board will only show posts from the last 30 days
- data-tags - tags - filter by the tags you have set up in the TINT board
- data-saved-filter-id - filter by the save filters that you can set up in the TINT board. To learn how to set a Saved Filter in the TINT board, click here
- data-embed-title - to change the title in the browser
Typically these values should not be modified in the source code for your website, but instead generated in the TINT Editor, and copied and pasted.
Also worth noting is that data-infinitescroll, data-clickformore, and data-paginate, are unique Display Types for your embed, and as such, only one will be present at any given time.
Embed Customization Parameters
Further customization of the TINT embed can be achieved by the addition of the following:
- data-noPopup - if set to "true" removes the pop-up modal and directs users to the original social content in a new browser tab.
- data-mobilescroll - if set to "true" will allow TINTs utilizing fixed height values to scroll on mobile devices. Click here for more information on this.
- data-nomobilerender - if set to "true" TINT will not render on mobile devices. Useful if you want to optimize the performance of your site on mobile.
- data-notrack - if set to "true" then tracking cookies will be disabled for the embed
- data-nocache - if set to "true" then each time a user visits the embed, the browser will fetch the content from server instead of using a cached version
- data-add-post-open (only available on new themes using the new embed code which you get via TINT) - if set to "true", this will automatically open the public add a post modal. It is also possible to specify the name of the query which, when present in the page's URL to automatically open the public add a post modal.
For example, data-add-post-open="review":
data-add-post-open URL Expected behavior (not present) https://www.example.com/ Closed false https://www.example.com/ Closed true https://www.example.com/ Open r https://www.example.com/?r=1 Open r https://www.example.com/ Closed review https://www.example.com/?review=true Open review https://www.example.com/?review=false Closed
You may add any of these customization parameters within the <div> element of the TINT embed code. For example, if we want to remove the pop-up modal we’d include data-noPopup="true" alongside other parameters in the <div>:
<div class="tintup" data-id="embedexample" data-columns="" data-expand="true" data-infinitescroll="true" data-personalization-id="631651" data-noPopup="true" style="height:500px;width:100%;"></div>
UTM Tracking Parameters
To learn more about UTM Tracking Parameters, click here.
If you have any questions regarding TINT embed parameters, please don’t hesitate to contact Technical Support at email@example.com.