Website Widget – Avochato Help Center

What are website widgets in Avochato?

Avochato allows you to create personalized chat widgets to embed on your website. Once enabled on your website, the widget provides both a channel for your customers to opt-in for future SMS messages, but also a method for starting an instant chat conversation with that customer.

Adding the widget to your website is simple. Once the settings are configured, have your webmaster copy the widget code snippet and place it into the <head> of your website’s HTML.

How to Set Up Widgets

To get started making a widget, click “Web Widgets” on the green navigation panel on your left, and then click “Create Widget”. As you complete the process, you will see a live preview of your widget on the right side of the screen.

Widget Settings

1. Set Responses

Customize the text response your contact receives. You can tailor a different response when you are available and out of office hours.

2. Customize Appearance

Here you are able to upload your logo and update the color scheme of the widget.

We have many out-of-the box settings that will allow you to control the experience of your widget.

Show a Call-Out Message Bubble: Language that will pop out next to your widget logo. Clicking on the call-out bubble will also open the widget.

Enable Live Chat: This will create a “Start Live Chat” button and allow people to communicate within the widget chat on their web browser.

Enable Text Us: This will create a “Text us” button and allow people to submit a widget inquiry and receive a text response back.

Open the Widget in a New Browser Tab: The widget itself will open up a new window when your customer clicks on it (vs. embedding it into your webpage).

Outside Office Hours: There are multiple configurations available with the website widget outside of your normal office hours.

1. Show SMS and Live Chat – The widget will have the same functionality during office hours and outside office hours.

2. Disabled – The widget will not be available. You can customize a message that will display to your customers but they won’t be able to submit their information.

3. SMS Only – Only the SMS option will be available outside of office hours.

Automatically Open Widget: Optional feature to have the widget pop open after a customizable delay of seconds without requiring a customer to click on it. For some customers, this may yield better conversions on landing pages where the target audience is unfamiliar with website widget behavior.

Widgets that have already been opened will not re-open after the user closes them.

3. Advanced Options

Tagging Settings: Option to auto-tag any contact that is created via widget submissions.

Webhook Settings: Widgets can have a webhook URL configured. The webhook URL will receive all the data around widget submission (including all fields, browser and device data, etc.) when the widget is successfully submitted.

Session Duration: Length of time the contact chatting will see messages in the conversation window after refreshing the page, e.g. if Session Duration is set to 1 hour, and the contact refreshes the webpage, they will only see the last 1 hour of messages.

Re-Open Closed Conversations: Closed conversations in Avochato will reopen upon website chat submission.

Enable Text Us Footer: Allows contacts to send a text message or call your Avochato number directly

Additional Fields: Customize which fields are available when your contacts complete your widget submission. You have the ability to include Email, Help Message Box, or a Custom Drop Down. Some common uses for the Drop Down are locations, departments, or urgency of the inbound request.

4. Go Live

You can name your widget and this is where the widget code will live. Jump down to Additional Settings to continue configuring your widgets color, fields, and additional settings. Once you have completed these steps, have your webmaster copy the widget code in the <head> of your website’s HTML and “Go Live”.

As always, please text us at (415) 214-8977 if you have any questions.

Widget Analytics

Analytics for Agent response time and conversation handling time are located in the Analytics section of Avochato.

The Widget can be configured with SMS + Live Chat, SMS only, or Live Chat only. Conversations initiated via SMS are rolled into the SMS channel conversations. Conversations initiated via Live Chat are rolled into in Live Chat channel.

For more details on Live Chat and Dashboard reporting, view this article.

Widget Submission Metadata

When a conversation is submitted through the widget, Avochato collects the following metadata about the submission: Name, Phone, Submission text, + any other fields in widget form, as well as:

Device Type

Browser

Referrer - The URL visitor was on when submitting through widget e.g. mywebsite.com/thispage

Viewing and Collecting Widget Metadata

1) Salesforce

If you have the Avochato Salesforce integration, the widget metadata, including the referrer URL, will be passed to Salesforce via the Avochato_Widget_Referral_URL__c field.

2) Live Chat Conversation Window

When a Live Chat is submitted through the widget, the agent handling the ticket can click on the three dot menu and select the User Info icon.

3) Application via Advanced Widget Options - Webhook Settings

To automate collection of metadata across SMS and/or Live Chat submissions, a webhook can be setup under advanced options.

First, setup the webhook URL that will be used to send data into the receiving system/application. Next, add the webhook URL into the Widget - Advanced Widget Options section.

Live Chat Profile Pictures

Agents can now show their real profile photo to website visitors during live chat conversations, instead of the default initial-in-a-circle avatar.

What it does

When enabled, your uploaded profile photo appears next to your messages (and the typing indicator) in the live chat window on your website widget, giving contacts a more personal chat experience.

Where it appears

Only in the website widget live chat window (the chat visitors see on your site)

It does not change your avatar in the ticket inbox or anywhere else in Avochato

How to turn it on

Go to your Profile page (click your name/avatar, then Edit Profile)

Upload a profile photo if you haven't already

Check the box labeled "Show Photo in Live Chat Conversations within Website Widgets"

Notes:

This checkbox only becomes available once you've uploaded a photo, and it's off by default, so you need to opt in yourself.

If you remove your photo, this setting automatically turns off. You'll need to re-enable it if you upload a new photo later.

This is a per-agent setting — there's no account-wide toggle. Each teammate controls their own live chat photo individually.

💡

Good to know

Uploaded photos must be under 500kB.

If your photo fails to load for any reason, the widget will automatically fall back to showing your initial instead.

Your photo is shown publicly to any contact you're chatting with in live chat, so only enable this if you're comfortable with that.