Polls
      Back to home
      2. Explore by Feature
      3. Polls

      Classic Interactive - Embeds

      Embedding "Interactive" content directly on your website or within your mobile app.

      "Interactive" and "Social" content are embeddable on websites or your mobile app. This article addresses embedding Interactive content. See "Social - Embeds" for embedding Social content.

      If you've never created an Interactive Embed on your account, then see "Getting Started" below. You can skip down to the "Configuring" and "Replacing" sections if you are looking to adjust or replace the Interactive content currently displayed on your website or mobile app.

      Getting Started

      To get started with your first Embed, you will:

      1. Navigate to the Interactive Workspace either via 
        1. Selecting "Interactive" from the Left Nav Menu on the Home page or
        2. the Product Menu [see below]Product Menu > Interactive
      2. Select "Embeds" Interactive Embeds Callout
      3. Click "+ Create New" then "From Scratch"
      4. Give your embed a Title, then open the "Type" menu. Choose "Panel" followed by opening the "Panel" menu to select which piece of Interactive content you'd like to embed. Once content is selected, it will appear in the preview window on the right side of your screen.Creating an Embed
      5. Save the embed, then navigate back to Embeds to copy or share the embed code.Copy or Share Embed Code
        1. Copying the embed code allows you to paste it on the same device.
        2. Sharing the embed code allows you to successfully share it without stripping.

      Configuring an Embed

      Within the Embed Builder, the last menu option on the left sidebar is "Configurations". You will be able to adjust the desktop and mobile aspect ratio for your embed. The desktop aspect ratio is 16:9 by default while the mobile aspect ratio is 1:1  by default. Embed Configurations

      Note:

      If you change the mobile configurations, change the "Preview size" to test the appearance.

      Replacing Interactive Content within an Embed

      You do not need to create a new Embed every time you'd like to change out the embedded content displaying on a particular website [or within your mobile app]. The Interactive content previously chosen can be replaced with a different asset from within the Embed builder.

      1. Open the Interactive WorkspaceProduct Menu > Interactive
      2. Select "Embeds"
      3. Open the embed with the Interactive content you'd like to replace by clicking on the row
      4. Navigate to the "Panel" menu on the left sidebar. Click "Remove Panel" and replace with it with new Interactive content by clicking "Select Panel".Replace Interactive Embed

       

      ❓Frequently Asked Questions❓

      How do your embeds work? How should it be implemented?

      Tagboard Embeds rely on the placement of a block of HTML, and a Script tag into the HTML of a given website that will automatically generate an HTML iFrame that displays Tagboard content.

      An example of the block of HTML and Script:

      <div class="tagboard-embed" tgb-embed-id="12345"></div>
      <script src="https://static.tagboard.com/embed/assets/js/embed.js"></script>

      There are two parts to the above embed code: (1) the Embed HTML Block and (2) the Embed Script. When a given website loads and the Embed Script is executed, the Embed Script automatically looks for the Embed HTML Block as an anchor point to generate an iFrame to display Tagboard content. For Tagboard Embeds to work properly, both the Embed HTML Block, and the Embed Script must be present.

       

      What is the expected behavior of the script?

      When the Embed Script loads (typically immediately after a website loads), it begins to look within the HTML of the given page of the website for the Embed HTML Block. Once the script finds the Embed HTML Block, it uses the tgb-embed-id property of the Embed HTML Block to determine what Tagboard Content should appear within the generated iFrame.

      If the script cannot find the Embed HTML Block, the script will fail to create an iFrame.

       

      Why is my embed getting cut off?

      HTML iFrames do not resize to fit their content automatically. This is not a limitation of Tagboard embeds, but rather how browsers as a whole handle HTML iFrames. When a website renders an HTML iFrame, it applies a default size of 300px wide, by 150px tall. If the Tagboard content within the generated iFrame is getting cut off, you will need to apply styling to the HTML Embed Block directly to size it appropriately.

       

      How do I change the size of my embed?

      To change the size of the generated iFrame, you will need to apply CSS styling to the provided Embed HTML Block, or the generated iFrame within. This can be done by targeting the .tagboard-embed CSS class, or the other classes that appear as child nodes of the Embed HTML Block, after the Embed Script has generated an iFrame within it.

       

      I put your embed code into an iFrame, why isn't it working?

      • Javascript and or scripting is disabled from running on the given website
      • The given website is not using HTTPS 

       

      I put your embed code in my website and now my load times are slow, what can I do?

      If you notice your load times have slowed down with the inclusion of a Tagboard Embed. Try placing the Embed Script between the <body /> tags of the HTML of the given website. Placing scripts at the bottom of the <body /> element can improve page load, because script compilation can slow down the display of a given website.