Vizir

WARNING

Translated, needs to be reviewed

You can (must) customize your chatbot. There are many possibilities, we will see them tab by tab:

# Colors

# User message colors

These are the colors of the messages that are sent by the respondents In the image below the color of the bubbles is pink and the color of the text is white.

  • The color of the bubble (color)
  • The color of the text in the bubble. We use the same color for the text color of the buttons (reponse-color-text) color messages

# Chatbot messages

Here you have the same options with the possibility to customize the picto which will be the image of your chatbot.

  • The color of the bubble (color-message)
  • The color of the text of the bubble (color-message-text)
  • The picto of your chatbot (picto.url)

# Background

You can change the background of the chatbot window; by changing the color or by putting an image (be careful with the eyes)

  • Background color: we advise you to keep a sober color 😉
  • Background image: This background image will be visible on screens up to 577px. Remove the image to get a plain background
  • Mobile background image: This image will be visible on mobile screens (< 577px). Delete the image to get a plain wallpaper

# Buttons (Answer suggestions)

You can have three types of buttons. You can customize the background color of each of these buttons. Please note that the text color will remain the same in all cases so make sure that the colors are compatible.

WARNING

The color of the button text will always be the same as the color of the respondent's message text.

As long as you have not customized the color of the "default" button, we use the background color of the bubbles of the respondent.

The header is the top part of your web chatbot Header

# Display the header

You can decide to display it or not thanks to the Show Header variable (design.showTopBar)

You can modify the logo. It is impossible to delete the logo. If you want to delete it, you will have to put an image of the same color as the top bar (design.logo.url)

TIP

Optimal size is 100px x 40px with a limit of 300px x 40px

# Chatbot title

This is the "name" of your chatbot. It will be visible to all respondents. You can disable the display of the title if you wish. (Grand Vizir in the example above) (design.title & design.showTitle)

# Chatbot description

The description will be visible under the chatbot title in the web interface. You can enable or disable its display as well. (Description of the chatbot in the example above) (design.description & design.showDescriptionInHeader)

# Header color

You can customize the header background color as well as the title and description text color (design.color-header & color-header-title)

# Show a button to restart the conversation

On the web interface, you can decide to display (or not) a button that will allow respondents to reset the conversation. This button can be useful when your respondents are a bit lost in the maze of your chatbot, it is often more visible (and more used) than the Menu "burger" which has a similar role. restart button

Here again, you can customize the text that will be displayed when the mouse passes over the icon.

# Display

The options below allow you to display or not the options of the input bar of the responder. Input bar

# Show burger menu

Allows you to show or hide the "burger" menu (design.showBurgerMenu)

# Disable input bar

Allows you to disable the input bar. (persistent_menu[0].compose_input_disabled)

PS: If you disable the input bar, the file and photo upload buttons and the microphone button will not be visible anymore.
The "burger" menu remains accessible.

WARNING

Be careful, respondents can only interact with the chatbot via buttons!

Technical information: It is theoretically possible to activate (or not) the input bar depending on the language of the respondent, however this feature is not yet implemented. Do not hesitate to contact it@vizir.co if you want this feature.

# Display the file upload button

This is the first icon that corresponds to a file.

# Show the image upload button

This is the second icon that corresponds to a camera.

TIP

On mobile, the click on this icon open directly the camera.

# Placeholder of the input

This is the value that will be visible in the input bar before the respondent starts typing their response (design.placeholderMessage)

# Message sent by a human

You can customize the message that appears below the livechat messages with the name of the operator who answers your user. (design.fromHumanMessage)

This is what you get: Livechat Message sent By Human

To do this it's very simple In Design of the chatbot > Display you can add the operatorName variable in the Message sent by a human section

Message Livechat edit

# Voice Bot

Since 2020, it is possible to activate the voice bot on your web chatbot. This first implementation is very simple, when the option is active. A new icon will appear in the text bar of the respondent and when he clicks on this button we will trigger the microphone and send the text communicated as a message. The answer will also be directly "read" by the respondent's computer. Voice button

# Widget

The widget will be visible on your site as shown in the image below. Widget

Again, many parameters can be customized:

# Widget Icon

This is the image that will be displayed before the widget is opened (design.picto.widget)

# Shape and Size of the widget

You can choose between the square shape with rounded corners or the round shape for the widget. (design.widget-picto-shape)

You can also choose between several sizes for the widget. (design.widget-picto-size)

TIP

The widget being visible on your site, you can modify the CSS. (font, font-size, position, ...)

# Notification

The notification is activated in several cases:

  • first visit on the site, the first message of the chatbot is displayed in a bubble
  • in the case of an engaged livechat, all messages sent by a user will be visible to the respondent without him having to open the widget via this notification bubble.

You can change the size of the notification, the text color and the background color of the notification. (design.widget-notification-background-color & design.widget-notification-text-color & design.widget-font-size)

# Delays

We added the possibility to play on 2 different delays

  • Add a delay before displaying the widget (in ms): This allows you to not display the widget directly on your website until after a certain time. This can be useful to not "scare" the respondent or to start a conversation only with visitors who are interested in your product (who stay more than 1 minute on your site for example) (design.show_widget_delay)

  • Show notification: This option allows you to display a notification (small red 1 in the widget bubble) even if the user has already read the last message. This can be useful in some cases when you want the respondent to end the conversation. Be careful not to abuse it because it can be very intrusive. (design.show_widget_notification_delay)

# Automatic widget opening

Allows to activate the automatic opening of the widget (when the user arrives on a page with the widget). This option can of course be combined with the "delay before widget display".

# Position

We have planned in our roadmap to customize the position of the widget icon. However, due to market "norms" we have disabled this possibility on the dashboard. Write to us at it@vizir.co if you want to change the position of the widget on your site. (design.widget-picto-position)

← Share your bot →