Page tree

 

Contents

After you have created or edited a campaign and a message, you can adjust the look of it using the options in the Visual Editor as shown in the image below. This article will cover the details of how to adjust the viewing size, change the user agent, view source codeadjust message text and layout, and insert elements.

Related Articles

See below for related articles

Adjust the Viewing Size

You can use the Visual Editor to build “responsive” campaigns, or campaigns designed for different screens sizes. If you have Campaign Editor or higher permissions, you can set the size of the Visual Editor to mirror the viewing size of desktops, tablets, and mobile devices. There is a standard group of breakpoints available by default, but you can also set your own, which will be available to anyone with Campaign Editor or higher permissions in your dataset.

  1. Select a default area in the responsive breakpoint bar to change the previewed viewport size
  2. Gray bars appear on the left and right sides of the viewport container which can be used adjust the width of the viewport container and create a custom breakpoint
  3. Click  to save a custom viewport size as a breakpoint
  4. Click  to delete an existing breakpoint size

    NOTE

    Deleting a breakpoint deletes it across the dataset so anyone with Campaign Editor or higher permissions in your dataset will no longer see the breakpoint

 

Change the User Agent

In addition to previewing viewport sizes, you can also preview sites while spoofing your user agent. This will trick your site into displaying what would be shown on an actual mobile device or tablet, which can be very helpful for sites that are both adaptive and responsive.

  1. Select  at the right of the responsive breakpoint bar
  2. Select the device from the list:
    1. Default (Chrome)
    2. iPhone (iOS)
    3. iPad (iOS)
    4. Phone (Android)
    5. Tablet (Android)

View Source Code

You can access message source code in an expandable area in the bottom of the page. After you click Apply, code changes are immediately reflected in the campaign so you don't need to close the window to preview the changes.

  1. Select Message Source Code at the bottom left of the window
  2. Change the background from light to dark or dark to light by clicking 
  3. On the Experience JavaScript tab, you can enter JavaScript that will apply for all messages in the experience

    Example

    If you need to exclude an experience from running specific versions of Internet Explorer, you can enter the code that does that in the Experience JavaScript tab
  4. On the Message Source Code tab, add or adjust message level:
    1. HTML/CSS (including top level styles)
    2. JavaScript

      Example

      If you are building a campaign that moves the location of an element on a website, you can enter the code to do that in Message Source Code > JavaScript
    3. Dynamic Variables
  5. Click Apply to view code changes immediately in your message

 

Adjust Message Text

In this section, you can adjust font styling (weight, size, color, and alignment) and add numbers or bullets. You can also add dynamic content to your message.

  1. Click once to select Message text. Highlighting a portion of the text creates a second, smaller element container which makes it possible to adjust the styling word by word, or quickly add a hyperlink. The original, larger element container controls all of the text at once (shown at right)

    Types of Element Containers

    There are several types of containers you will see in Evergage (see sample images at right, and note mouse location):

    (a) Orange-dashed–element that can be selected

    (b) Orange-solid
    –element is currently selected and editable, and the mouse is hovering over the element

    (c) Green-solid
    –element is selected and editable, but the mouse is not hovering over the element

    (not shown) Green-dashed–tracked link or click, but the mouse is not hovering over the element. This is only seen in when the Visual Editor is open, but you are not editing a campaign
  2. Change the text of the message
  3. Adjust font styling as needed using:
    1. –adjust the font type to any of the 15 pre-loaded font styles (image at right = Impact)
    2. –adjust the font size between 8 and 80px (image at right = 24px)
    3. –bold the text
    4. –italicize the text
    5. –underline the text
    6. –change the font color (image at right = #000000)
    7. –left justify the text
    8. –center the text
    9. –right justify the text
    10. –add numbering to text
    11. –add bullets to text

 

(a)

(b)

(c)

Adjust Message Layout

  1. Click Background to adjust the background color and style including making the background of your message transparent, a solid color, a gradient or an image
  2. Click Layout to adjust the margin, padding, corner radius and border
    1. Select Linked to change all Border Width or Corner Radius sizes at the same time or select Unlinked to make individual edits to each border or corner radius 
    2. Select CSS to access the stylesheet for the message to make appearance adjustments in the stylesheet instead of using the editor
  3. If you are using the Visual Editor , you can select any element on the page and show , hide , or delete  it, regardless of whether it was created in Evergage
  4. Select text and adjust alignment left , center , or right
  5. Reorder multiple elements using in front  or behind
  6. Select an element and click  to make an exact copy of an element

 

Insert Message Elements

Before inserting any message elements, ensure that you select the message so the line is solid (orange, changing to green when you move your mouse away). If you select an added element, Insert Element will change to Edit [element name]. Click Edit [element name] to make changes to the element as needed.

TIP

Any added text boxes, form elements, and cloned items will appear in the top left of the message. Any added images or links will appear in the middle of the message.

Insert Text Box

  1. Click   and select  Text Box
  2. Select Enter text... to add your own text
  3. Format the text as desired

Insert Image

Any images you use must be hosted on a content delivery network (CDN) before you can use them in an Evergage message.

  1. Click  and select Image
  2. Enter the Image URL
  3. Add a Tooltip, if desired
  4. Add a Link URL, if desired, which will direct the visitor to a page after clicking the image
  5. Select an Action, if desired, to track the click back to a mapped Evergage action
  6. Select other options, if desired
    1. Open Link in New Tab–open a new tab when visitor clicks image
    2. Close Message When Image is Clicked–close the message, but not permanently dismiss the message, when the visitor clicks the image
    3. Permanently Dismiss Message When Image is Clicked–do not show the message again even if the viewer qualifies for the campaign
  7. Click OK
  8. Select the image to reposition or resize

  1. Highlight a portion of text and select  OR click  and select Link
  2. Enter the URL
  3. Add a Tooltip, if desired
  4. Select an Action, if desired, to track the click back to a mapped Evergage action
  5. Select other options, if desired
    1. Open Link in New Tab–open a new tab when visitor clicks image
    2. Close Message When Image is Clicked–close the message, but not permanently dismiss the message, when the visitor clicks the image
    3. Permanently Dismiss Message When Image is Clicked–do not show the message again even if the viewer qualifies for the campaign
  6. Click OK
  7. Select the text box to reposition or adjust the font styling

Insert Close Icon

A default close icon is added to new messages, which you can edit by selecting the element and clicking , but you can add an additional close icon that you can configure differently as needed.

  1. Click  and select Close Icon
  2. Select the behavior
    1. Dismiss Message Forever–do not show the message again even if the viewer qualifies for the campaign
    2. Hide Message Once–close the message, but do not permanently dismiss the message
  3. Click OK
  4. Select the close icon to reposition or adjust the font styling

 

Insert Form Elements

If you add any form elements, you must add a Submit Form Element to send the data back to Evergage.

  1. Click  and select Form Element
  2. Select the Form Element type
    1. Checkbox–one checkbox which maps to an Evergage User Field defined for the dataset
    2. Radio Buttons–present a minimum of two options which map to an Evergage User Field defined for the dataset (for example, "favorite color" would have a list of options from which a visitor could select one)
    3. Text Input–fixed-size input field mapped to an Evergage User Field (for example, field which visitor can enter his/her city of residence)
    4. Text Area–larger, resizable input area mapped to an Evergage User Field (for example, text area where visitor can describe reason for inquiry)
    5. Dropdown–similar to Radio Buttons, but in drop down format, a minimum of two options which map to an Evergage User Field defined for the dataset
    6. Submit–one button which sends captured form information back to Evergage using an Evergage Form Action defined for the dataset (for example, if you are capturing an email address that the visitor enters, you would add a Submit button to send that back to Evergage)
  3. Complete required fields and options
  4. Click OK
  5. Select the form element to reposition or adjust the font styling

 

This page has no comments.