ÃÛ¶¹ÊÓƵ

DocumentationJourney OptimizerJourney Optimizer Guide

Work with the web designer work-with-web-designer

Last update: Thu Nov 07 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

CREATED FOR:

  • Beginner
  • User

In Journey Optimizer, visual web authoring is powered by the ÃÛ¶¹ÊÓƵ Experience Cloud Visual Helper Chrome browser extension. Learn more

CAUTION
To be able to access and author web pages in the Journey Optimizer user interface, make sure you follow the prerequisites listed in this section.

Start authoring your web experience

To start authoring your web experience using the visual web designer, follow the steps below.

CAUTION
The ÃÛ¶¹ÊÓƵ Experience Platform Web SDK must be included into your web page. Learn more

  1. From the Edit content screen, click Edit web page to open the web designer.

    note note
    NOTE
    If you attempt to load a website that fails to load, a message displays suggesting that you install the Visual Editing Helper browser extension. See some tips for troubleshooting in this section.
    You can also edit your web content without loading the visual editor. To do so, unselect the Visual editor option to use the non-visual edition mode instead. Learn more

  2. Once in the web designer, select any element from the canvas, such as image, button, paragraph, text, container, heading, link etc. Learn more

  3. To edit an element, you can use:

    • The contextual menu to edit its content, layout, insert links or personalization, etc.

    • The icons on top of the right panel to edit, duplicate, delete or hide each element.

    • The right panel that changes dynamically according to the selected element. For example, you can edit the background, typography, border, size, position, spacing, effects or inline styles of an element.

NOTE
The web content designer is mostly similar to the email designer. Learn more on designing content with Journey Optimizer.

Once you edited your web content, you can manage your modifications. Learn more

Use components content-components

  1. From the Components pane on the left, select an item. You can add the following components to your web page and edit them as you need:

    • Divider
    • HTML
    • Image
    • Heading - Using this component is similar to using the Text component in the email designer. Learn more
    • Paragraph - Using this component is similar to using the Text component in the email designer. Learn more
    • Link

  2. Hover in the page and click the Insert before or Insert after button to append the component to an existing element on the page.

    note note
    NOTE
    To unselect a component, click the ESC button in the contextual blue banner displayed on top of the canvas.

  3. Edit the component as needed directly in the content of your page.

  4. Adjust the styles that display from the contextual pane on the right, such as background, text color, border, size, position, etc. - depending on the selected component.

Add personalization

To add personalization, select a container and select the personalization icon from the contextual menu bar that displays. Add your changes using the personalization editor. Learn more

This section details the different ways you can navigate through the web designer. To view and manage the modifications added to your web experience, see this section.

Use breadcrumbs breadcrumbs

  1. Select any element from the canvas.

  2. Click the Expand/Collapse Breadcrumbs button on the lower left side of the screen to quickly display information about the selected element.

  3. When you hover over the breadcrumbs, the corresponding element is highlighted in the editor.

  4. Using it you can easily navigate to any parent, sibling, or child element within the visual editor.

Swap to browse mode browse-mode

You can swap from the default Design mode to the Browse mode using the dedicated button.

From the Browse mode, you can navigate to the exact page from the selected configuration you want to personalize.

It is especially useful when dealing with pages that are behind authentication or that are not available from the start at a certain URL. For example, you will be able to authenticate, navigate to your account page or to your cart page, and then switch back to Design mode in order to perform the changes on your desired page.

Using Browse mode also enables you to navigate through all the views of your website when authoring single-page applications. Learn more

Change device size change-device-size

You can change the device size of the web designer display to a predefined size such as Tablet or Mobile landscape, or define a custom size by entering the desired number of pixels.

You can also change the zoom focus - from 25% to 400%.

The ability to change the device size is designed for responsive sites that render well on various devices, windows, and screen sizes. Responsive sites automatically adjust and adapt to any screen size, including desktops, laptops, tablets, or mobile phones.

CAUTION
You can edit a web experience with a specific device size. However, as long as the selectors are the same, these changes apply to all sizes and devices, not just the device size that you’re working in. Similarly, editing an experience in the normal desktop view applies the changes to all screen sizes, not just the desktop view.
Currently, Journey Optimizer does not support device size-specific page changes. This means that for example if you have a separate mobile website with a separate site structure, you should make the changes specific to your mobile site in a different campaign.

How-to video video

The video below shows how to author a web experience using the web designer in Journey Optimizer campaigns.

recommendation-more-help
b22c9c5d-9208-48f4-b874-1cefb8df4d76