Embed Code Parameters, Specifications, and Customizations

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>

Embed Parameters

• 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-from - to show a set date range (in seconds)
  For example:
  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-post-tags - gives the ability to auto-generate tags on Reviews and Public Add A Posts.  Click here on how to implement this
• data-embed-title - to change the title in the browser
• data-hide-no-content - if set to "true", this will hide the TINT board if there are no posts set as public.  It changes the view from There are no posts here to view yet display to blank display

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

• data-noimages
• data-slideshowctrl
• data-noimagescaling
• data-nomobilenavmenu
• data-touchscreen 
• data-form-values (Form Builder Embed only) - this enables the ability for a form builder form to be pre-populated with elements of your choosing.  Add the value between quotes as a query string. For example, data-form-values="first_name=John&last_name=Doe" would pre-fill the first name as John and last name as Doe, assuming that the form element id for first name is first_name and the form element id for last name is last_name.  Depending on your goal, you might seek to automate this process which would require further coding.  It's important to remember that the desired values must be encoded for URLs.

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

• utm_source 
• utm_campaign 
• utm_medium 
• utm_content
• utm_term 
• data-utm-passthrough
• data-append-utm-to-cta

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 support@tintup.com.