User & Chatbot Avatar Images / Profile Photos

How to create, update and adjust profile pictures of chatbots and agents/users in the customer-facing chat widget

Within the Talkative widget you can show images in the widget header, as shown below:

Avatar images can be displayed in three distinct phases

1. In the standby phase, i.e. before an interaction has started (as shown above),

2. With a human agent during a live interaction, once the customer has connected to the agent, and;

3. With a chatbot (which is essentially acting as a user in the system).

1. Widget Header Image

In order to upload an image in the standby phase, go to your widget editor and go to the theme section, as shown below. By default this image will change when you Connect to either a chat bot or a human agent. However you can override that setting such that the header image is always the same (with the Overrides toggle enabled).

If you have no chatbot avatar enabled, then the widget header image in 1. will stay in place during the chatbot conversation (even if "Overrides" setting is disabled). The widget header image will also stay in place while the interaction is queueing.

2. User Avatar Images

For users you can upload an avatar on the user profile which can be found by going hi there

i) For your own user, click on your name in the bottom left,

then click User Profile, then add your image:

ii) for your team's users, navigate to the user manager page, edit the user, and update their avatar. Only Supervisors can edit agent avatars, and only Account Holders can edit supervisor and agent avatars.

3. Chatbot Avatar Images

To change the avatar for a chatbot you can do that within the chatbot settings, depending on which chatbot solution you are using. For example if you are using a Dialogflow you need to go to Settings -> Chatbots -> Dialogflow -> Edit Dialogflow Config. 

Recommended Size & Dimensions

Widget header images have a maximum file size of 10MB, however we highly recommend using smaller file sizes since this asset will need to be loaded onto your website.

User & Chatbot avatar images have a maximum file size of 300KB.

The size of the rendered image depends on what you have specified in the widget editor under Avatar Size dropdown setting (small, medium, large, or extra large).

Small: a circle of diameter/width/heigh of 40px

Medium: a circle of diameter/width/height of 48px

Large: a circle of diameter/width/height of 56px

Extra Large: a circle of diameter/width/height of 64px

We therefore recommend avatars be square size with a width/height divisible by your chosen size.

For example, if you are going with the standard Small avatar size configuration (most common among Talkative users), we'd recommend a square image measuring 160px x 160px, or 400px x 400px. 

The image does not need to be square, but cropping the image to be square before uploading may give you a better idea of how the image will look in situ.