HTML Customization

Updated on October 21, 2018
Download PDF

Limited Release: This feature is available to a select group of customers. If you would like early access to this feature please contact your CSM to learn more.

Brief Overview

Fully customize the structure of WalkMe content using HTML. WalkMe’s HTML customization tool allows you to add buttons, move text and change the structure of your WalkMe ShoutOuts and Balloons.

The Editor’s HTML customization tool provides granular control over the structure and appearance of your WalkMe Balloons and ShoutOuts. Used in combination with our CSS Editor, you now have full control over the structure and design of your WalkMe content.

Use Cases

HTML Customization use cases include the following:

  • Create additional buttons for your Pop-Up Balloons
  • Add multiple text areas for your ShoutOuts
  • Rearrange the placement of buttons and text in Balloons

How it Works

WalkMe Balloons and ShoutOuts use HTML, CSS, and BBCode to render the final look and feel of WalkMe on your site. You can use HTML and BBCode to add structure and content to a Balloon, and CSS to change the design.

The HTML console allows you to add additional fields and buttons to a Balloon, and it is available in the Editor.

HTML Attributes

Some HTML elements (placeholder elements) are editable using the WYSIWYG Editor, Rich Text Editor (RTE), Multi-Language, and accessibility tools. These placeholder elements have either the wm-placeholder attribute (for creating new text areas) or the wm-action-placeholder attribute (for creating new buttons).

Placeholder elements can interact with WalkMe because the special attributes they contain enable WalkMe to identify them by their purpose and integrate them with WalkMe features (e.g., the RTE, Multi-Language, WYSIWYG, etc.). Static HTML elements, which do not contain these attributes, can not directly interact with these features, and are only editable using the HTML console.

Pro-Tip: It is recommended that you add these attributes to your custom HTML elements, especially if you use Multi-Language or accessibility features. Adding the attributes also allows other builders to modify the content without using the HTML console.

Below is an example of a div tag with the wm-placeholder attribute. This element is editable via the HTML console, or in the WYSIWYG, RTE, and more:

And in the WYSIWYG, we see a new editable field:

Now, below is an example of a div tag without the special placeholder attributes. because it does not contain a wm-placeholder or wm-action-placeholder HTML attribute, it is not editable via the WYSIWYG, RTE, etc., but only via the HTML console:

And in the WYSIWYG, the element appears but cannot be edited:

How to Access the HTML Customization Console

  1. Go to the Interaction tab of a ShoutOut or a WalkMe step’s option screen;
  2. Click Edit HTML/CSS:

Which Areas can be Edited?

Balloons

Only content within the inner div of the Balloon can be edited (see image below). This means you can add elements to the area that includes the title, content and the X button. The footer cannot be edited using HTML. However, the entire Balloon’s CSS can be edited.

Shoutouts

Unlike with Balloons, all of a ShoutOut’s HTML areas can be edited.

Pro-Tip: You can currently only edit the HTML of ShoutOuts based on the default Classic format:

Most Common HTML Customizations

Add an action button

Create action buttons as follows:

  1. Enter the HTML console: Go to the Interaction tab, and click on edit HTML/CSS;
  2. Choose an HTML tag: You can add buttons using <div>, <span> or <button> HTML tags;
  3. Add a class: To edit the button with CSS, add a designated class;
    • Pro-Tip: Name the class the way you want it to appear in the CSS console. You can also use an existing class if it carries the styling you would like for your button.
  4. Turn the button into a WalkMe button: Add the attribute wm-action-placeholder;
  5. Give your button a name: Add wm-action-placeholder=”<name>”;
    • Pro-Tip: Name the button the way you want it to appear in the analytics reports, Multi-Language editor and Interaction tab.
  6. Give your button a default text: Add the default text between the tags.

Example: <div class=”my-class” wm-action-placeholder=”buttonname”>Default Text</div>

What can you do after an action button is added?

  1. This button will be editable through the WYSIWYG (no need for BBCode):
    • Select a button action by clicking on the button and selecting its action (identical to ShoutOuts’ existing buttons) (see “a” in image below);
    • Button text can be edited directly from the preview in the Interaction tab (see “b” in image below);
    • The button’s appearance can be toggled off (like the existing ShoutOut buttons) without deleting it from the code (see “c” in image below):
  2. The button can be designed using the CSS console. Clicking on the button will auto-write its class into the CSS console.

Here is the button before CSS styling:   

And here is the button after CSS styling:

Add a text area

Create text areas as follows:

  1. Enter the HTML console: Go to the Interaction tab, and click on edit HTML/CSS;
  2. Choose an HTML tag: You can add text areas using <div> or <span> tags;
  3. Add a class: To edit the button with CSS, add a designated class;
    • Pro-Tip: Name the class the way you want it to appear in the CSS console. You can also use an existing class if it carries the styling you would like for your button.
  4. Make the text-area work with the WYSIWYG: Add the attribute wm-placeholder;
  5. Give your text area a name: Add wm-placeholder=”<name>”.
    • Pro-Tip: Name your text area the way want it to appear in the Multi-Language editor and in the RTE.

Example: <div class=”myclass” wm-placeholder=”CustomTextArea”></div>

What can you do after a text area is added?

  1. The text area will be editable through the WYSIWYG;
    • Text area can be edited directly from the preview in the Interaction tab. Just click on it to add/edit text;
    • The text area will function the same way as the main text area — it will have all WYSIWYG functionalities and will have a designated area in the RTE.
  2. The text area can be designed using the CSS console. Clicking on the text area will auto-write its class into the CSS console:
  3. The text area can be edited in the Multi-Language editor;
  4. The text area can be accessed via analytics.

 

 

 

 

Was this article helpful?

Related Articles