Skip to content

Integration guide

You’ll need the ability to edit the web page where the Tyle is to be embedded. Depending on how the website is managed (WordPress, Wix, Squarespace, etc.) you may need to request access from the website’s owner.

Tyles can be embedded into any webpage that supports JavaScript. Embedding a Tyle is as simple as placing a small <script> tag. These code snippets are widely accepted across the web as the preferred method of embedding third-party services, making them incredibly easy to use.

The snippet is a small piece of JavaScript code that loads asynchronously without impacting your page load time. Once installed, it allows our platform to render your Tyle and gather analytics.

This method ensures maximum compatibility and performance, as the script is optimized to be small, efficient, and secure.

How it works

Every Tyle on the platform has a unique snippet that can be embedded into any web page.

<!-- Example snippet -->
<script async src="https://get.tyleiq.com/tyleiq.js?aid=582774c3&pid=584415a3"></script>

When a user visits a web page containing one or more snippets, the script does the following:

  1. Loads asynchronously in the background from our global CDN.
  2. Performs various security checks.
  3. Displays the Tyle associated with this unique snippet.
  4. Begins collecting analytics data.

Getting your snippets

After a Tyle is created, its snippet is automatically made available from your Dashboard.

  1. Log in to your account.
  2. Navigate to the Dashboard.
  3. Locate the Tyle you wish to embed.
  4. Click the “Snippet” icon to show the embed code.
  5. Click the “Copy” icon to copy the snippet to your computer’s clipboard.

Implementation

Place the snippet where you would like the Tyle to appear. The position of the snippet in the page’s HTML structure is important because Tyles render inline.

To ensure the snippet loads correctly, do NOT place it in the <head> section of your website’s HTML, or load it globally on all pages.

Please see the following basic example of how to embed a Tyle snippet into the HTML structure of a webpage.

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- your existing head section -->
  </head>

  <body>
    <!-- your existing body content -->

    <script async src="https://get.tyleiq.com/tyleiq.js?aid=582774c3&pid=584415a3"></script>

    <!-- rest of your existing body content -->
  </body>
</html>

Verifying the integration

You can verify that the snippet is installed and working correctly using any of the following methods.

1. Via your Dashboard

The simplest method is to check whether impressions and clicks are being recorded:

  1. After adding the snippet to a web page and deploying the changes, visit the page once.
  2. After about 10 minutes, visit your Dashboard.
  3. You should see the impression count has increased for that Tyle.

2. Developer Tools

  1. Open the web page containing the Tyle snipped in a browser (like Chrome or Firefox).
  2. Open the Developer Tools (Right-click > Inspect, or press F12 / Cmd+Option+I).
  3. Go to the Network tab. Refresh your page.
  4. You should see requests to the tyleiq.com CDN with a 200 status code.

3. Inspecting source code

  1. Navigate to any page on your website where the snippet has been embedded.
  2. Right-click anywhere on the page and select “View Page Source” (this may be called “Show Page Source” or similar depending on your browser).
  3. A new tab will open showing the raw HTML of your page.
  4. Use your browser’s Find feature (Ctrl+F or Cmd+F) and search for tyle.js
  5. If the search finds the snippet code, it confirms the script has been added correctly to your web page.

4. Listening for JavaScript events

When a Tyle successfully loads, it will emit a unique event called tyle_did_load. You can use this event as you wish, including triggering other custom events on the page.

You can listen for the tyle_did_load event using the following code:

document.addEventListener("tyle_did_load", event => {
	console.log("Event fired:", event.detail);
});