Skip to main content
Loading...
  • Customer Experience
    Customer Experience
  • Employee Experience
    Employee Experience
  • Brand Experience
    Brand Experience
  • Product Experience
    Product Experience
  • Core XM
    Core XM
  • Design XM
    Design XM

Responsive Dialog Creative

What's on This Page:


Was this helpful?


This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

The feedback you submit here is used only to help improve this page.

That’s great! Thank you for your feedback!

Thank you for your feedback!


About Responsive Dialog Creatives

The responsive dialog is a creative type available for Website / App Feedback projects. This creative type enables you to make accessibility compliant creatives that are responsive to different device sizes.

The responsive dialog creative provides accessibility features out of the box, without the need for additional JavaScript based updates that were required in the past.

Once you have access to this feature, the Responsive dialog is available alongside other creatives.

Screen that says "Choose how you collect feedback." Enormous tiles at top for responsive dialog and feedback tab. below that, additional options

Once you create your responsive dialog, there are six areas that you can customize before setting up your intercept: Size & Style, Message, Buttons, Logos & Images, Animation, and Translations.

Size & Style

In the Size & Style section, you can customize the overall look and feel of the creative as follows:

Standard Size & Style Options

These are the options that appear if you do not use an embedded target, and leave Display survey directly in the dialog deselected.

Size & style section in the responsive dialog creative

  • Content spacing: Configure the density of the text on your creative. You can choose either Compact, Medium or Spacious.
  • Color: Configure the background color of the creative by choosing from the color picker palette.
  • Border shape: Configure the border radius of your creative. This determines how rounded the corners are. You can choose from None, Slightly Rounded, Moderately Rounded, Very Rounded.
  • Drop shadow: Configure the drop shadow surrounding your creative. You can choose from None, Light, Medium, Heavy.

Display Survey Directly in Dialog

When you select Display survey directly in dialog, the survey will be embedded on the creative, instead of linked with a button.

Selecting this option disables the Message and Buttons tabs because you will no longer have a message or buttons on the Responsive Dialog, aside from what is already set in your target survey. Selecting this option also means you have different Size & Style settings:

Options for Size & Style in the responsive dialog creative editing box

  • Automatically resize dialog to fit your survey: Automatically resize the responsive dialog to fit the survey you are displaying in the dialog. The window will automatically resize according to the length of the first page of your survey.

    Qtip: If you’d like to make the responsive dialog creative automatically scale to a larger size, add additional questions to your first page of the survey or add additional spacing to your survey. To make the responsive dialog smaller, move questions to other following pages, add page breaks, or decrease the spacing within your survey.

  • Color: Configure the background color of the creative by choosing from the color picker palette.
  • Border shape: Configure the border radius of your creative. This determines how rounded the corners are. You can choose from None, Slightly Rounded, Moderately Rounded, Very Rounded.
  • Drop shadow: Configure the drop shadow surrounding your creative. You can choose from None, Light, Medium, Heavy.
  • Accessibility
    • Iframe title: This text will be read by a screenreader when the visitor navigates to the embedded window.
  • Preview survey
    • Sample survey: Choose a survey to view in the preview window to the right. This is a great way to test whether you need to edit your target survey’s Look & Feel, such as by changing to a different theme, changing the font size, or removing theme logos. See Eliminating Scrollbars for some tips on how to format your target survey.
      Qtip: This option is to help you preview the appearance of an embedded target. To set the actual target, edit the corresponding intercept.

Message

In the Message section, you can the configure the Headline and Description that shows up on your creative. The headline should generally be a short phrase that captures the visitor’s attention, while the description gives more detail as to why the creative has appeared to them.

For both the Headline and Description, you can customize the actual text, the font size, and the font weight.

Message tab in the responsive dialog creative

Buttons

In the Buttons section, you can configure options specific to the number, appearance, and target for each button.

Buttons tab in the responsive dialog creative editor

  1. Start by choosing the number of buttons you want on your creative.
  2. Specify the Border Radius for each button by choosing from None, Slightly Rounded, Moderately Rounded or Completely Rounded.
  3. Specify the Text Size.
  4. For each button:
    • Specify your Label This is what the button says.
    • Choose the Button Action to either Open Target or Dismiss Intercept. Open Target indicates that this button will open the target that you specify in your intercept criteria. Dismiss Intercept will simply close the intercept.
    • Choose your Label Color, Background Color and Border Color using the color picker palette.
    • Designate an ARIA label. By default, screen readers will read the text that you specify for the button label. However, in some cases, you may want the screen reader to read additional context, such as, “Click on this button to open up a new survey window.” In this case, you can specify the ARIA label for the button controls.

Logos & Images

In the Logos & Images section, you can specify one or more images/logos to include on your creative.

Logos & images tab in the responsive dialog creative editor

You can choose to upload a separate image for Mobile or Desktop, so that different images will be displayed depending on whether the creative is seen on a Mobile or Desktop browser. You can also upload the same image but with different resolutions to optimizing the display on either type of device browsers.

Qtip: If you only upload an image for Mobile, that image will be used for Mobile as well as Desktop browsers. However, if you only upload an image for Desktop, that image will only be used for Desktop browsers.

To make the image accessibility complaint, you also have the ability to specify the Alt Text to go with the images. (Alt Text is a feature that allows screen readers to describe an image to visually impaired users.)

Animation

In the Animation section you can choose the type of animation (Fade or Slide In)  you want for your creative as it appears on the screen.

Animation tab in the responsive dialog creative editor

  • Display dialog after: The number of seconds after the user meets the intercept conditions (e.g., clicks into the app) that this dialog appears.
  • Set timer to close dialog: Determine how long after the dialog appears that it should close itself. Deselect this option to force the user to close the dialog to remove it from the screen.
  • Transition Type: Choose whether the creative fades or slides onto the screen when it appears. If you choose Slide In animation, then you can also select the final position of the creative on the screen (Top Left, Top Right, Bottom Left, Bottom Right).
  • Fade Background: The color of the device’s screen behind the creative (None, Light, Medium or Dark).

As needed, you can preview your animation settings on this screen as well, by clicking on Preview Animation.

Translations

You can add translations for all the text in your responsive dialog. See the Translating Feedback Buttons & Responsive Dialogs page for step-by-step instructions.

Translations tab in the responsive dialog creative editor

Previewing the Responsive Dialog Creative

As you configure the responsive dialog creative, you can preview how the creative will look on different screen sizes (e.g., desktop, mobile and tablet).

Preview options

You can also toggle between Landscape or Portrait orientation for mobile devices by clicking the icon in the upper-right corner.

Saving and Publishing the Responsive Dialog Creative

As you add changes to the responsive dialog creative, please be sure to periodically save your work by clicking on the Save button on the top-right hand corner, just above the preview area.

Once you are ready to publish your creative, click on Publish. This will make it so that you can push the creative live to your mobile app.

Buttons in upper-right

Configuring Intercepts

Responsive dialog creatives can can be used with standard intercepts. Just make sure that when you set the intercept’s Creative, you select the responsive dialog creative under the Responsive Dialog section.

Selecting from creative dropdown of intercept