Web

You can start designing the campaign by adding templates by clicking on the ➕ icon on the left side. Select a suitable template for you and get going.

CTAs on the Dashboard

On the top right corner of the Dashboard you have four CTAs for tooltips and three CTAs for modals

Launch URL
Configure
Edit
Save

Launch URL:

After clicking the Launch URL icon, you will be asked to enter the URL of your pre-integrated website. You can then select the UI elements after enabling the web view detector from the top right corner.

Configure:

After clicking the configure icon, you can use the Edit Design section to configure your template.

Edit Design Section (Modals)

Direction
Choose the alignment of text and buttons as either vertical or horizontal.
Close Icon
You can select whether to include the close icon in the template or not.
Title Icon
You can also add an icon to the left of the title.
Media Type
You can select the media type you want in your modal from 4 options.
None: No media item, just Title, Description and two Buttons
Icon: A small icon along with Title, Description and two Buttons
Image: An image along with Title, Description and two Buttons
Video: A video along with Title, Description and two Buttons
You can place the media on top of the text or on the left of the text.
Width
You can use the slider to adjust the width of the template. The height will be automatically adjusted according to the width to maintain the aspect ratio.
Position
You can select the position at which you want to place the template on the screen. You have options from Center, Top Left, Top Right, Bottom Left and Bottom Right.
Dim Background
You can choose if you want to dim the background behind the template. You can also select the background color and opacity percentage.
Dismiss Config
You can set the template to dismiss on touch outside the template and auto dismiss after x seconds.
Delay
You can set the template to be shown after x seconds from the context being met.

Edit Design Section (Tooltips)

Direction
Choose the alignment of text and buttons as either vertical or horizontal.
Close Icon
You can select whether to include the close icon in the template or not.
Title Icon
You can also add an icon to the left of the title.
Arrow Type
You can choose the arrow type of the tooltip which points to the UI element from the six available options. Normal, Round, Narrow, Large, Small and Wide.
Media Type
You can select the media type you want in your modal from 4 options.
None: No media item, just Title, Description and two Buttons
Icon: A small icon along with Title, Description and two Buttons
Image: An image along with Title, Description and two Buttons
Video: A video along with Title, Description and two Buttons
You can place the media on top of the text or on the left of the text.
Width
You can use the slider to adjust the width of the template. The height will be automatically adjusted according to the width to maintain the aspect ratio.
Position
You can select the position at which you want to place the template on the screen. You have options from Center, Top Left, Top Right, Bottom Left and Bottom Right.
Animation
You can enable animation for the tooltip and set the animation duration. The animation is a slight up and down movement of the tooltip.
Dim Background
You can choose if you want to dim the background behind the template. You can also select the background color and opacity percentage.
Dismiss Config
You can set the template to dismiss on touch outside the template and auto dismiss after x seconds.
Delay
You can set the template to be shown after x seconds from the context being met.

Edit UI element

After clicking on this edit icon you will be shown the Select UI Element modal, edit the URL and click on Launch URL. Reselect the UI element you want in the new tab that opens. Come back to this tab and click on Proceed.

Save Template:

After clicking the Save this Template icon, you will be asked to enter the name for this template which will then be stored under your saved templates. Use this option to save your configured template for further use in other campaigns.

You can access your saved templates while selecting a template by clicking on the Saved Templates CTA as shown in image below.

In-Place Editing

You can click on the items in the template to use the edit options available. You can also remove an item by hovering on it and clicking on the delete icon that appears at the top left corner of that item.

To add the removed item again hover over the template and click on the pencil icon visible in the above image.

Title Config

Once you click on the Title text, you will get the Title config pop-up.

You can find the options to edit the text, font size, font color, text alignment, font weight(normal or bold), font style(normal or italic), font type among others.

You can also use Dynamic Text in the Title to personalize it based on user properties.

You can use the Text Paddings options to position your text at the desired position in the template.

Description Config

Once you click on the Description text, you will get the Description config pop-up.

You can find the options to edit the text, font size, font color, text alignment, font weight(normal or bold), font style(normal or italic), font type among others.

You can also use Dynamic Text in the Description to personalize it based on user properties.

You can use the Text Paddings options to position your text at the desired position in the template.

You can check the text scrollable checkbox if you have a large description text and want to make the text scrollable without disturbing the size of the template container.

Slider can be used to vary the height of the scrollable text box. You can enable the border for the scrollable box and change the border color, border width and select the border style (solid, dashed or dotted).

Background Config

You can change the background color, paddings from top, right, bottom and left.

You can enable the shadow for the template container, change the shadow color, set the offset, vary the blur effect and set the spread amount.

You can choose to enable the border for the template container, vary the border width, border radius, change the border color and choose the border style(solid, dashed or dotted).

Button Text Config

Once you click on the Button text, you will get the Button Text Config pop-up.

You can find the options to edit the text, font size, font color, font weight(normal or bold), font style(normal or italic), font type among others.

You can also use Dynamic Text in the Title to personalize it based on user properties.

You can use the Button Text Paddings options to position your text at the desired position in the button.

Button Config

Once you click on the Button background, you will get the Button Config pop-up.

You can choose button type(filled or none), background color of the button, button margins(top, right, bottom and left), button paddings(top, right, bottom and left).

You can enable button border, set the border width, border radius, border color and border style(solid, dashed or dotted).

You can choose the button action(dismiss, cancel or redirect). Cancel action cancels the entire walkthrough. Dismiss action dismisses the current step and continue with the remaining walkthrough. You can select whether to open the redirection URL in same tab or new tab.

Icon Config

Once you click on the Icon, you will get the Icon Config pop-up.

You can enter the icon URL, set the icon width, icon height, icon alignment(start, center or end).

You can enable border, set the border width, border radius, border color and border style(solid, dashed or dotted).

Image Config

Once you click on the Image, you will get the Image Config pop-up.

You can enter the image URL, set the image aspect ratio in terms of width x height.

You can enable border, set the border width, border radius, border color and border style(solid, dashed or dotted).

Video Config

Once you click on the Video, you will get the Video Config pop-up.

You can enter the mp4 video URL path, set the video aspect ratio in terms of width x height.

You can enable border, set the border width, border radius, border color and border style(solid, dashed or dotted). You can choose whether to enable the audio or not.

Close Icon Config

Once you click on the Close Icon, you will get the Close Icon Config pop-up.

You can select the icon type(normal, filled or custom). You can enter your custom icon URL if you select icon type as custom. You can select the action as either Cancel or Dismiss. Cancel action cancels the entire walkthrough. Dismiss action dismisses the current step and continue with the remaining walkthrough.

You can set the icon color, fill color and shape of the icon(rectangle or circle).

You can resize the icon and use the offset options to position the cross icon as per your need.