Skip to main content
Messaging

Add a webchat widget to your website

Set up an inbox's webchat widget so website visitors can send you an enquiry that arrives as an SMS conversation.

Written By EmuChat

Last updated About 4 hours ago

A webchat widget puts a short enquiry form on your website. Each submission arrives as an SMS conversation in your inbox, and your replies reach the visitor by text.

Set up the widget

For a shared inbox, you need to be a workspace administrator. For a personal inbox, you need to be a member of it. Each inbox can have one widget.

  1. Go to Settings > Inboxes, edit the inbox, and open the Webchat tab.

  2. Select Set up webchat.

emu.chat creates the widget, already turned on, with a starter form that asks for the visitor's first name, last name, mobile number and message. Customise it with the sections below, then add it to your website.

Customise the text and appearance

On the Webchat tab, edit the widget's heading, introduction, launcher prompt, the thank-you response visitors see after they submit, and the theme colour. Open Advanced configuration to change the launcher button's position, size and layering on your page. The preview beside the form shows your changes as you make them. Select Save to apply them.

To hide the widget from your site, turn off Enabled and select Save. You don't need to remove the snippet.

Send an automatic text reply

Write a message in SMS auto-reply to text the visitor each time they submit the form. Use Contact Fields to insert merge fields. Leave it blank to send no automatic text.

  • The auto-reply is sent from the inbox like any other message, so it uses credits.

  • If a visitor submits again within 5 minutes of an auto-reply, they don't get a second one.

  • The inbox's after-hours auto-reply isn't sent for webchat enquiries.

Choose the form fields

Visitors see the fields in the order listed under Form fields. Drag a field to reorder it.

  1. Select Add field.

  2. Choose a Type, such as text, email, date, a list of options, or an image upload.

  3. In Answer goes to, choose whether the answer only appears in the conversation, or also fills in a contact field or one of your custom contact fields. Some types can only appear in the conversation.

  4. Enter a Label, add optional help text, and choose whether the field is Required.

  5. Select Add field.

Each contact field or custom field can be filled by only one form field. The mobile number field can be relabelled and moved, but not removed, because replies reach visitors by text.

Note: If you deactivate or delete a custom field that a form field fills in, visitors stop seeing that form field, and it's marked Not shown in the list. Edit or remove it.

Add the widget to your website

  1. On the Webchat tab, select Copy embed snippet.

  2. Paste the snippet once into your website's HTML, anywhere on the page. The script places the widget itself.

Changes you save later apply to your site automatically, so you never need to update the snippet. The widget only appears while it's enabled, the inbox is active, and your workspace has an active trial or subscription.

Test the widget

Submit the form on your site with your own mobile number. The enquiry arrives in the inbox and, if you've set one, the auto-reply arrives on your phone.

If the inbox uses the shared trial number, it's for testing only: get a dedicated number before adding the widget to your live website. While the widget is enabled, select Try it now to test your live widget inside emu.chat without touching your site. See Your free trial: what's included and what happens when it ends.

Tip: Each mobile number can submit a widget's form up to 3 times a day. If you test repeatedly with the same number, use another number or wait 24 hours.

What a submission creates

  • The visitor sees your thank-you response.

  • The enquiry arrives as an incoming message in the inbox, listing each answer, with any uploaded images attached. Each mobile number has one conversation per inbox, so a repeat visitor's enquiry joins their existing conversation and reopens it if it was archived.

  • A new conversation is assigned using the inbox's automatic assignment, if you've set it up. See Assign conversations to teammates.

  • If a shared contact already has the visitor's number, emu.chat fills in only its empty fields and keeps existing values. If the contact is synced from Outlook or Entra ID and its fields are locked, only custom fields are filled in. Otherwise it creates a new shared contact. See Personal vs shared contacts.

  • If you've written an auto-reply, it's texted to the visitor.