Customize your Web Experiences with Branded Images

A well designed Experience can really capture a user's attention, and often images are a key component to design. Lytics web Experience allow for a single image to be included, but out of the box there is not much flexibility - that's where custom CSS can help.

In this guide, you will learn how to create a widget with a stylized image component. Images are a natively supported feature of the Pathfora SDK and Lytics web Experiences, however the default styles for images are rigid. This guide will explore a few different methods on how to customize images for your web Experiences.

You can download the complete JavaScript configuration and CSS, for this example from the GitHub examples repository.

Custom Image Approach

There are three ways you might approach adding an image to a web Experience or Pathfora widget:

1. Setting a background image with custom CSS.
2. Using the natively supported image feature with some custom CSS to adjust the size and placement of the image relative to the text of the widget.
3. Adding an image via inline HTML to the message or headline field.

This guide will discuss the implementation of options 2 and 3. Note that option 3 is only available for widgets built directly through the SDK. Inline img elements can not be added in the Lytics Experience editor.

JavaScript Configuration

Using the Default Image Feature

To use the native image capability in Pathfora, simply add the variant and image settings to a basic widget configuration to get started.

var imageWidget = window.pathfora.Message({
  id: "image-widget",
  layout: "slideout",
  position: "bottom-right",
  className: "image-widget",
  headline: "Save 10%",
  msg: "24 hour sale on all Apple mobile phone products!",
  image: "assets/iphone-modal.png",
  variant: "2",
  okShow: true,
  okMessage: "Save Now",
  cancelShow: false
});

window.pathfora.initializeWidgets([imageWidget]);

This config will generate a simple slideout, with a headline, message and CTA, and a small, circular image above the text.

Adding an image in this way is natively supported for web Experiences in the design step of the editor.

Using an Inline Image

You could also present an image within the text content of the widget by adding an img HTML element in the headline or message of the widget:

var imageWidget = window.pathfora.Message({
  // widget configuration
  msg: "<img src=\"assets/iphone-mini.png\" class=\"pf-widget-img-inline\" alt=\"iPhone\">24 hour sale on all Apple mobile phone products!",
});

You may want to add a custom class name to this element to help style it with CSS later.

Note: As mentioned above using HTML inline images in this manor is not compatible with web Experiences created through the Lytics UI, not even with API overrides. This approach only works if you are implementing widgets with the SDK directly.

The complete code example in this guide will contain both a large feature image using the native Pathfora setting, and a small inline image.

Styling the Image Slideout

With some additional CSS work, you can style images of both types to fit the slideout.

Styling the Default Image Setting

The image generated by the image setting in the config has the class name pf-widget-img. In the CSS, to select this element you will also need an additional level of specificity to ensure that your styles will override the default Pathfora styles for images. The example below specifies the pf-widget-variant-2 class name in addition the the standard custom class name of your widget.

.pf-widget.pf-widget-variant-2.image-widget .pf-widget-img {
  border-radius: 0;
  width: 100%;
  height: auto;
  top: 0px;
  left: 0px;
  margin: 0px;
}

These styles make the image span the full width of the widget, and position it at the top.

Next you can adjust the text to appear below the image, by applying a margin to the headline. Remember that CSS specificity may be important here as well.

.pf-widget.pf-widget-variant-2.image-widget .pf-widget-content .pf-widget-headline {
  margin-top: 190px;
}

Lastly, we'll need to adjust the "x" button in the corner of the modal to display prominently above the image.

.pf-widget.pf-widget-variant-2.image-widget .pf-widget-img {
  /* existing styles */
  z-index: 0;
}

.pf-widget.image-widget .pf-widget-close {
  color: white;
  z-index: 1;
}

Styling an Inline Image

Now to style the inline image, select the custom class name you defined. The example in this guide floats the image left of the text of the widget:

.pf-widget.image-widget .pf-widget-img-inline {
  float: left;
  width: 25px;
  margin-right: 20px;
}

.pf-widget.image-widget .pf-widget-message {
  text-align: left;
}

Remember you can download the code for this example to get the completed JavaScript and CSS. This can act as a starting point for your own custom image widget.

Defining the Lytics Audience

Once you've tested and are happy with the look and feel of your image slideout, it's time for the most important step: defining the Lytics audience that should receive this Experience.

The example widget in this guide is targeted at an audience of users with a high momentum and some affinity for iPhones, the featured product of the slideout. Remember to update your config with the audience ID you wish to serve the widget to.

Alternatively, as mentioned above, the image feature is natively supported by the Lytics web Experiences. You would simply need to add the CSS to your website to customize the image of your widget.