1. Home
  2. WalkMe Mobile
  3. Mobile: Building Content
  4. Mobile: The Campaign Wizard
  5. Mobile: How to Build and Edit Campaign Content in the Legacy WYSIWYG

Mobile: How to Build and Edit Campaign Content in the Legacy WYSIWYG

Updated on January 15, 2019 Download PDFDownload as PDF
Download PDF
IMPORTANT

This article refers to the Legacy WYSIWYG, which only applies for end-users with a version of your app containing the WalkMe Mobile SDK v1.13.0 and below.

If you have app-users who have upgraded to an app version containing the WalkMe Mobile SDK v1.13.1+ and you want to create content that only they will be able to see, please see our article on the new WYSIWYG (available with WalkMe Mobile SDK v1.13.1+).

We feel the functionality of the new WYSIWYG is far superior to the Legacy WYSIWYG, so we strongly recommend you urging your app-users to upgrade to a version of your app containing the new SDK as soon as possible.

You can create Walk-Thrus in your app’s Power Mode or begin building ShoutOuts and Launchers by clicking on NEW in the Mobile Console’s MY CAMPAIGNS tab.

Once you’ve either created a Walk-Thru, clicked NEW and selected your campaign-type and template in the MY CAMPAIGNS tab, or clicked on the edit icon of an already existing campaign, you can build it out or edit it using the Campaign Wizard’s WYSIWYG editor in the EDIT CAMPAIGN screen.

Here is the WYSIWYG editor in all of its glory!

Pro-Tip: This is the WYSIWYG UI you see when editing/designing a ShoutOut. The layout differs per campaign type.

 

Understanding the WYSIWYG’s Elements

The DRAG TO CANVAS panel of the WYSIWYG shows which Elements can be added to a particular campaign:

Understanding the CAMPAIGN ELEMENTS Section

Every item under CAMPAIGN ELEMENTS corresponds to an Element that currently sits on your app screen:

Adding Text to Your Campaign

Drag the Text icon to wherever you’d like text to appear on your app screen and type in your desired text under TEXT SETTINGS.

To customize a piece of text, click the relevant text element under CAMPAIGN ELEMENTS and adjust the settings in the TEXT SETTINGS panel:

With Mobile SDK version 1.5.0 and above, you can use the same font-family as your host app uses. Hooray!

The fonts list is pulled from the fonts embedded in the app itself, but not all fonts can be displayed on the WYSIWYG. Use the Preview option in your app’s Power Mode to see how a given font will appear in your app.

Adding Images to Your Campaign

Drag the Image icon to wherever you’d like an image to appear on your app screen.

To customize your image, click the image’s icon under CAMPAIGN ELEMENTS and adjust its settings in the IMAGE SETTINGS section:

You can also add a new image to your campaign in IMAGE SETTINGS, either from the media stored in your Mobile Console or from your computer’s hard drive, by clicking the drop-down arrow to the right of IMAGE.

Adding Buttons to Your Campaign

Drag the Button icon to wherever you’d like a button to appear on your app screen.

To customize your button, click the button’s icon under CAMPAIGN ELEMENTS and adjust its settings (e.g., the text that appears on it and the Call To Action (“CTA”) that occurs once it’s clicked) in the BUTTON SETTINGS section:

Adding Shapes to Your Campaign

Drag the Shape icon to wherever you’d like a shape to appear on your app screen.

Use shapes as building blocks to create complex designs. Shapes are used to create visual Elements with clickable areas, since, aside from buttons, they are the only element to have a CTA attribute. Shapes can be squares or circles depending on their ROUNDED CORNERS settings.

Steps For Using a shape to turn an image into a clickable area

To turn an image into a clickable area, do the following steps:

  1. Drag the Shape icon onto the app screen;
  2. Place it over an image;
  3. Resize it to the image’s size (roughly);
  4. Uncheck the BACKGROUND COLOR check-box to make the shape transparent;
  5. Assign a CTA to the shape, and this will create the illusion that the CTA is tied to the underlying image:

Available Calls To Action for Buttons and Shapes

The button and shape’s available CTAs are as follows:

  • CUSTOM: A positive CTA that will send the end-user to any URL or deeplink you enter in the CTA field;
  • MAYBE: A neutral (neither negative nor positive) CTA which, when clicked, will close the ShoutOut, but will cause the ShoutOut to reappear on the end-user’s screen at a random time in the following 1-3 days;
    • Campaigns that re-appear after clicking MAYBE CTAs don’t count toward impressions limits.
  • NEVER: One of two negative CTAs that will close the ShoutOut and ensure that the end-user never sees this ShoutOut again;
  • CLOSE: The second of two negative CTAs. Clicking it will close the campaign, but will not affect its future behavior vis a vis end-users (as opposed to NEVER CTAs’ behavior);
  • OK: A positive CTA that counts toward the campaign’s Click Through Rate;
  • SHOW SETTINGS: A positive CTA that, once clicked, will transport the end-user to the host app’s settings page;
  • CAMPAIGN: A positive CTA that links one campaign to another. For example, enter the name of a Walk-Thru in the available field, and, once the end-user clicks the CTA, the named Walk-Thru will begin to play.

Adding a Web-View to Your Campaign

Web-views import web surveys or other Google-Docs-based items directly into your app’s UI.

  • Drag the Web-View icon to wherever you’d like a web-view to appear on your app screen;
  • Select the size of the web-view;
  • Select the URL from where the web-view will be imported;
  • Select the DISMISS URL, or the URL at which, once reached, the campaign will be automatically dismissed and a positive CTA will be registered.

Web-views are most often used in ShoutOut campaigns.

 

Was this article helpful?

Related Articles