Serviceform academy logo

Pop up design

Learn how to configure the Pop up of your Chatbot.

Pop up is the first page to appear when the Chatbot is initiated. Having an eye catching pop up will help you to increase user engagement and generate more leads. This article explains:

      • Types of pop up

      • Pop up texts

      • Pop up design

      • Pop up initiation timing

How to access the Pop up settings?

To access the Pop settings of your Chatbot:

1. Login to your Serviceform account and select the tool that you want to edit.

2. Click on Pop up which is located just below the Design option.

How to change between different types of pop ups?

Pop ups can be customized to display different elements based on your preference. Select your pop up type here:

Each pop up type comes with different functionality and design:

• Regular

This pop up includes an Avatar, text and buttons from the flow. You will be able to choose from which element of the flow you want to get the buttons from.

• Minimal - Buttons only

This pop up only includes buttons from a specific element of the flow, which you can choose.

• Minimal - Text

This pop up has both the text and the buttons from an element of the flow. Unlike regular pop up, this pop up displays the text separately from the buttons.

• Video

This pop up can include a video along with the title and subtitle. You can check the requirements to upload a video into your Chatbot's pop up.

• Write now - Live chat

This pop up displays a text area in addition to the header and subtitle. The customers can send messages via this text area which would then initiate alive chat request.

• Write now - No live chat

This is similar to the previous pop up type but this would allow the customers to chat with the AI or initiate the flow by sending a message via the text area.

Modify the pop up text

The Header and subtitle texts of the pop ups can be changed except for the Minimal - Buttons only pop up type. Here's how you can do it:

Design your pop up

Make your pop up align with your brand preferences by changing the colors, avatar, animations, etc... Here is how you can do it:

• Alignment

Modify the alignment of your pop up's header and subtitle.

• Pop up image

Set an image which will be displayed in the pop up.

• Pop up colors

Change the colors of text, background and the buttons of the pop up.

• Pop up width

Adjust the width of the pop up.

• Pop up decoration

Decorate your pop up by adding a Balloon element to the Header text and modifying it's colour.

• Pop up animation

Choose between different pop up animations:

- Pulse

- Wiggle

- Shake

Pop up timing settings

You can configure the pop up to appear after a specific period of time, set how often you want to display the pop up and under which conditions:

• Time frame

This is the time(In seconds) after which the pop up would be displayed once the page loads.

• Frequency

Select the time frame after which you want the pop up to be displayed again after the first instance.

• Conditions

You can select the condition under which you want to display the pop up.

- Returning user

The pop up will be displayed for the customers who are visiting your website again.

- Page URL contains

The pop will be displayed if the URL contains a specific key owrd or text. For example, if you want to display the pop up in your product page(, you can type "product" in the text area displayed below the condition.

 - Page URL is exactly

The pop up will be displayed only if the URL matches the key word or text that you have specified.

- Page class contains

The pop up will be displayed only if the web page contains an element with a class name that you have specified. For example, if the web page has an element(image) with the class "product", you can specify it in the logic text area.

- User is on mobile

The pop up will be displayed only for the mobile users.