Site Intercept - Editing Creatives | Qualtrics

Editing Creatives

Introduction

Once you have selected a new Creative, you will be directed to the Creative editor. Here, you can add content to your Creative and design it any way you like.

While all Creative types are unique, most use the same basic editing functions. In this tutorial you will learn the basics of using the Creative editor.

Editing Space

On the Edit Creative page, you’ll notice an editing space, which is a simple grid workspace where you can build and modify your Creatives. This grid is used as a guide to help you line up the different elements of your Creative. It will have no bearing on where your Creative displays on your website (the position for most Creatives is set by the Anchor or on the Change Options page). You can move elements around by simply dragging them to the new desired position.

image02

The following shortcuts will make placing content on the grid precise and easy:

  • Small Nudge: With any element selected, press or to nudge it up, down, left, or right.
  • Large Nudge: With any element selected, press Shift + to nudge it up, down, left, or right. This nudges content a larger distance than using the arrow keys without holding Shift.
  • Highlight Content: Press Ctrl + H to highlight all elements on your Creative. This is helpful when you need to see where elements are overlapping.

 

New Element Toolbar

Adding content to your Creative is as simple as selecting an element type on the New Element Toolbar.

image13

The following elements are available

  • Box: The Box is useful for adding a background to your Creative on which you can add other elements. You can also double-click on the Box to add text.image00
  • TextBox: Display invitations, instructions, and other written content on your Creative using the TextBox.image09
  • Close Button: Add a button that will close the Creative when clicked. Not available for all Creative types.image06
  • Target: Add a link that will direct visitors to your Intercept’s Target. This link is unique because its destination is not set until you are building your Intercept. This allows you to reuse your Creative in multiple situations, each with its own Target. Double-click on the target to change the text, insert an image, or make other visual changes.image11
  • Embedded Target: Rather than visitors clicking on a link, which takes them to the Target Website (usually a survey), the Embedded Target allows you to display the target within your Creative.image18
  • Image: Insert a general image into your Creative. This is useful for branding purposes as well as for drawing visitors’ attention to your Creative.image16
    Qtip: Qualtrics supports JPG, PNG, and GIF images 16MB in size or smaller. For the best user experience, we recommend using PNG files and keeping images below 1MB.

Selected Element Options

After clicking on an element, you can toggle the element options along the top of the workspace. Note that these options may change depending on the type of element selected.

image20

Element Options

  • Background and Border: Click the background or border options to open a color palette.image01
    You can pick a color manually, enter a HEX color code to match your company’s color scheme exactly, click the Image icon to insert a repeating background image, or press the Clear button to set a transparent border or background.image03
  • Width and Height: Set the size of your element. Note that you can also click and drag the corners of your element to resize. Using the Width and Height option is appropriate if you need to specify an exact pixel size.image14
  • Border: Set the width of the border for your element.image05
  • Opacity: Set the transparency level for your element. By default, it will be 100%, which means it is not at all transparent.image19
  • Element Advanced Options Drop-down: Click the drop-down menu on the right for extra options, similar to what you’ll see if you right-click the element. Click the Element Advanced Options to toggle the layering of your element, to edit the content of the element (also done by double-clicking the element), to delete the element (also done by clicking the backspace key), to Add Event (see our Event Triggering and Event Tracking support pages for more info), or to enable the Snap to Grid feature.image07

Content Editor Toolbar

When you double-click on an element, the Selected Element Options will be transformed into a Content Editor toolbar. This editor has the same features and layout as the Rich Content Editor in the Qualtrics Research Suite. For more information, refer to our Rich Content Editor tutorial.image17

Of special importance to the Creative editor are the Source option and the Pipe Text option.

  • The Source option allows you to edit the HTML of your content directly. This is useful if you need exact control over the content of your Creative.image15
  • The Pipe Text icon allows you to display dynamic content so that the Creative is customized for each visitor.image12

The following information can be displayed through Piped Text

  • HTML Element: Enter the ID of an HTML element. When your webpage loads, Site Intercept will search for that element on your page, and display the content on your Creative.
  • URL Parameter: Enter the name of a parameter on the URL of your web page. Site Intercept will display the value of that parameter on your Creative.
  • Cookie Value: Enter the name of a cookie stored by your website on the visitor’s browser. Site Intercept will display the value of that cookie on your Creative.
  • JavaScript Expression: Enter a line of JavaScript and Site Intercept will display the result of your JavaScript on the Creative.
  • Web Service: Enter a web service URL to connect your Creative to an external web service. Site Intercept will send a request for information to that web service and will display the returned information on the Creative.
  • GeoIP Location: Select to display the visitor’s Postal Code, City, State/Region, Area Code, Country Name, or Country Code on the Creative.

Publishing Your Creative

Publishing your Creative allows you to take your latest changes and modifications and make them live on your website. Any time you have new changes to go live on your website, click the blue Publish Creative icon on the top right of the Creative editor.

image04

Qtip: Although publishing requires you to click the Publish button, saving your work doesn’t. Each change you make will be saved automatically, and then when you’re ready for those changes to go live, you’ll hit Publish.

 

When you publish your Creative, you will be invited to write a Description for your changes. This description will be used in your revision history to help you easily identify this revision in case you need to revert to it at some later point. You can find the Revision History by clicking Manage Creatives on the top right of the Creative editor.

Manage Creative

On the top right of the Creative editor you will find the Manage Creative drop-down menu.

image08

The following options are available

  • Revisions: View past revisions of your Creative or revert to a previous version.
  • Save: Manually save any changes you’ve made to your Creative. Note that changes are saved automatically every few seconds, so this option is not typically necessary.
  • Rename: Give your Creative a new name.
  • Copy: Create a copy of your Creative.
  • Copy to Library: Copy your Creative to a global library.
  • Delete: Remove your Creative. Note that this action cannot be undone.

Change Options

Most Creative types will use the basic editing functions described above. In addition to the basics, each has their own set of options located under Change Options. For example, a PopOver has animation settings, and an InfoBar has settings for whether or not to cover existing content when sliding onto the page.

image10

For details on the options available for a given Creative, refer to the support page specific to that Creative type.