Site Intercept - Custom HTML Creative | Qualtrics

Custom HTML Creative

Introduction

Most of the commonly used Creatives will overlay content on your website. The Custom HTML Creative is unique in that it allows you to create custom content that is displayed as part of your page. This custom content can be anything from an advertisement to an embedded survey.

image00
The question at the bottom of this page is a survey built in Research Suite and implemented on this page using a “Custom HTML” Creative through Site Intercept.

Custom HTML Creatives can also be useful for content management. Using Site Intercept’s powerful targeting capability, you can choose which surveys are shown to specific types of website visitors. For example, you could choose to display a discount offer only to those visitors located in areas near physical store locations, and alternate material to everyone else.

Implementing Custom HTML

  1. Have your web team designate a “container” on your website where your Custom HTML will be inserted. This space should include an HTML element with an ID attribute. Identify and copy the HTML ID between the quotation marks.image07
    In many cases, an HTML tag with an ID already exists in the proper location, and no site modifications are necessary.

    Qtip: Use your browser’s “Inspect Element” function to determine the HTML ID of an element. In most browsers, simply right click on the portion of the page you would like to inspect, and select “Inspect Element.”
  2. In the Options menu of your Intercept’s action, select Advanced Options.image13
  3. Paste the HTML ID of your target container into the Creative Insertion Point field.image14
  4. When a visitor comes to this page on your website, Site Intercept will search for the HTML element with the ID you specified, and insert your Creative in that div container.

Building Your Custom HTML

Now that you have a basic understanding of how Custom HTML Creatives are implemented, you can start building the Creative the same way other standard Creative types are built. For a refresher on how to build a Creative, refer to the Editing Creatives page.

In the Change Options menu at the top of the Creative editor, you will find settings specific to Custom HTML Creatives.

image15

Custom positioning

Sometimes your Custom HTML Creative may be smaller than the target container where it will be inserted on your website. In this case, you can use Custom Positioning to specify where in relation to the target container your HTML will display.

image12

The following screenshot shows the result of using custom positioning to place the Custom HTML on the left side of a target container:

image04

For even more control over positioning, you may Offset the X or Y position of the Creative from its initial position or select Fix to Page so the Custom HTML follows the visitor as they scroll.

Replace target container contents

image03

By default, when a Custom HTML Creative is inserted into a page, it replaces the existing content of the target HTML element. You’ll see this option selected as “Replace target container contents.”

 

Append to target container

Rather than replacing the target container contents, you can select “Append to target container” to place your Creative   within the target container, but after any existing content.

 

Insert before target container

This option allows you to insert the Custom HTML Creative before the target container. Note: This will ignore the options for custom positioning.

 

Insert after target container

This option allows you to insert the Custom HTML Creative after the target container. Note: This will ignore the options for custom positioning.

 

A Note On Z-Index

Z-index is a CSS property that specifies which elements on your web page should be on top when elements overlap. By default, Site Intercept Creatives will have a higher z-index than other elements on your page so that they are always on top.

This is usually best, but in some cases this may not be preferable. For example, a drop-down menu might be covered by your Custom HTML.

image02

To adjust the z-index of your Custom HTML:

  1. Go to your web page that displays the Creative and open the Developer Tools or Inspect Element tool.image06
  2. Identify the div class beginning with “QSI”, and copy the what is between the quotation marks. In the example below, we would copy “QSIUserDefinedHTML SI_0qrpcc4JeuFyVTv_UserDefinedHTMLContainer”image00
  3. In your Site Intercept account, go the Edit Creative page for your Creative.image01
  4. Double click on any element to modify it or create a new blank one.image11
  5. Click Source at the top of the Creative editor to enter the HTML view.image10
  6. Take the code below (including the style tags) and paste it into the source, making sure to replace the “QSIUserDefinedHTML” with the ID you retrieved in Step 3 and replace the z-index value with whatever is appropriate for your webpage.
    <style> .QSIUserDefinedHTML{z-index:1;} </style>

    image05

  7. If the intercept or zone code is already in your website’s source code, click the Publish Creative button to push your changes to your site.If the code is not in your website’s source code, you can use the Bookmarklet to test the Creative on your website and confirm that everything is layered properly.image08
  8. If the layering still is not right, you may consider changing the z-index value to a larger number in order to stack your Creative higher on the page, or a smaller (even negative) number to stack it lower.