How to embed TINT on WordPress

In this article, we will cover:

• How to embed TINT on WordPress via the Editor
• How to embed TINT on WordPress via Google Tag Manager

TINT can be embedded on any website that was created using the WordPress.com Editor. However, if the website is hosted by WordPress.com TINT will not be able to function. This is because Wordpress blocks all JavaScript instances being run on their site, this applies to Free sites and sites with a Personal or Premium plan. If you have a plugin-enabled plan (Business and Commerce), they have no limits to the code you can add. For more information click here.

How to embed TINT on WordPress via the Editor

For security reasons, the following tags are only allowed on plugin-enabled sites:

embed, frame, iframe, form, input, object, textarea, style, link

As WordPress only allows the above tags when embedding, you would need to use an iframe method of embedding. Please beware that putting your TINT board in an iFrame may disable some 

To do this, you will need to get the URL for your TINT board:

1. Select or search for your personalization on the right hand side panel.  Different personalizations will give you different options. The display options are
         * Signage
   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.
   
2. Then click next
3. Here it will give you three options, Standard Connection, Chromecast and TINTmix.  For this, pick Standard Connection for the URL version of your board, follow the instructions and click Open In New Tab
4. You will get an URL which looks like this: https://www.tintup.com/app/tint/tint.html#article_board?personalization_id=1095457&fullscreen=true 
5. To put this in an iFrame, remove &fullscreen=true of the URL
6. Then you can put it in the following format - for example: 
   <iframe src="https://www.tintup.com/app/tint/tint.html#article_board?personalization_id=1095457" style="height: 500px; width: 500px;"></iframe>
7. To instructions how to deploy this inside WordPress, click here

How to embed TINT on WordPress via Google Tag Manager (GTM)

First, you will need to embed the GTM code snippet on your WordPress site.  Click here to get the instructions directly from WordPress. 

1. After setting up your container, you would need to set up a Tag.
2. In Google Tag Manager, click Tags > New.
3. Name your tag 
4. Click on the + button 
5. Choose Custom HTML as your tag option
6. You would paste your edited code into the input field. See the example below. 
7. Click on the edit button in the Trigger section
8. Select All Pages option
9. Click on Save on the Trigger
10. Click on Save for the Tag
11. At this point, you can test your Tag, click Preview. The Tag Assistant will open
12. Enter the URL for your site.
13. To check if the tags that you have created are working, click connect.  This will prompt Google Tag Manager to open your URL in a new window and the other window, it will tell you if it fired the tag or not.
14. Once you are happy with the changes, click Submit
15. Save the version with notes if you want to keep track of what changes have been made
16. Click Publish  

Example code: 

<script async src='https://www.tintup.com/app/dist/embedded.js'></script>
<script>
 (function() { 
 /Here you need to pass the "parent element" where the TINT should be placed
var element = document.querySelector('NAME');
   if(element){
var container = document.createElement("div"); // creating the div element for TINT Board 
container.classList.add("tintup"); //adding the class=tintup
container.dataset.id='TINT_BOARD_SLUG'; //Here you should add the name of the TINT Board as it is also presented in the web embed code
//Here you can also declare more parameters of your code using the dataset method as follows:
container.dataset.personalization='PERSONALIZATION_ID';
//Now you should append the Parent element with the new div container
element.append(container);
 }})();
</script>

Example with an example TINT board 

<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-infinitescroll=“true”></div>

<script async src='https://www.tintup.com/app/dist/embedded.js'></script>
<script>
(function() { 
//Here we need to put the name of the parent div, in our example div1
var element = document.querySelector('div1');
if(element){
var container = document.createElement("div"); // creating the div element for TINT Board

container.classList.add("tintup"); //adding the class=tintup
container.dataset.id='article_board'; // adding the tintboard name
container.dataset.columns=''; //details regarding columns
container.dataset.expand='true'; //expand set as true
container.dataset.presonalization-id='1095729'; //personalization id
container.dataset.infinitescroll='true'; // infinitescroll set as true
container.style.height='500px'; //setting the height
container.style.width='100%'; //setting the width

//Now you should append the Parent element with the new div container

element.append(container);
}})();
</script>

If you’re still having trouble integrating TINT on your website using WordPress, please feel free to contact us at support@tintup.com.