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://d46a8no1ntz.cloudfront.net/public/js/modules/tintembed.js">
The <div> element contains various parameters that specify how your TINT will be displayed. It looks something like this:
<div class="tintup" data-id="embedexample" data-columns="" data-expand="true" data-infinitescroll="true" data-personalization-id="631651" style="height:500px;width:100%;"></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 if the Multiple Personalization Feature (MPF) is enabled
- 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.
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.
- data-noimages - if set to "true" will render without images.
- data-noimagescaling - if set to "true" web-optimized images (default) will be replaced with non-optimized images, and will also allow .GIF files to become animated. Use this if you notice low image quality on your theme.
- 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-offset - if set to a positive integer will determine which post TINT will start on. If set to "random" it will randomize the offset.
- data-slideshowctrl - if set to "true" will show the display controls (the control panel that appears in the TINT Editor for Display Themes) for some themes.
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>
If you have any questions regarding TINT embed parameters please don’t hesitate to contact Technical Support at email@example.com.