Skip to content
Message24Message24 Docs

Add chat to your website

Create a website chat channel, style the widget and get the snippet to put on your site.

Markdownllms.txt

Website chat puts a chat button on your own website. Visitors chat with your team and the AI directly, and their conversations appear in your Inbox next to your other channels. You create the widget in Message24, then add one line of code to your site.

Create the widget

Section titled “Create the widget”
  1. Go to Settings > Channels and select Add Channel.
  2. On the Web Chat card, select Connect.
  3. On Create Web Chat, enter a Channel Name. This is the name you see in Message24.
  4. Adjust the appearance and visitor form (see below), or leave the defaults and change them later.
  5. Select Create Channel.

The page becomes Web Chat Settings and shows your Embed Code at the top.

To add another widget, for example for a second website, go back to Add a Channel and select Add Another Widget.

Widget settings

Section titled “Widget settings”

Appearance

Section titled “Appearance”
  • Primary Color: pick one of the preset colours or choose your own.
  • Widget Position: Bottom Right or Bottom Left of the page.
  • Launcher Motion: None, or Bounce to catch a visitor’s eye. The bounce stops once they open the chat.
  • Input Placeholder: the hint text in the message box, such as “Type your message…”.

Header and welcome

Section titled “Header and welcome”
  • Business Name: shown in the chat header. If you leave it empty, the channel name is used.
  • Business Logo URL: the web address of your logo image. Optional.
  • Welcome message: the first message visitors see. If you leave it empty, visitors see “Hi! How can we help?”.

Visitor details form

Section titled “Visitor details form”

Choose what visitors must fill in before they can chat:

  • Name: turn on to require the visitor’s name.
  • Phone: turn on to ask for a phone number. Tick Required to make it mandatory.

Allowed origins

Section titled “Allowed origins”

List the websites allowed to show your widget, one per line, for example:

https://example.com
https://shop.example.com

If you leave this empty, the widget works on any website. Once you add addresses, it works only on those.

The checkbox Allow requests with no Origin header is for a mobile app or other embedded use by your developer. Leave it off for a normal website.

Select Save Settings after making changes.

Put the widget on your website

Section titled “Put the widget on your website”

  1. In Web Chat Settings, select Copy next to Embed Code. The code is a single line that looks like this:

    <script src="https://message24.net/widget.js" data-channel-key="your-channel-key" async></script>

  2. Paste it into your website’s HTML, just before the closing </body> tag, on every page where the chat should appear. If someone else runs your website, send them the code and the developer embed guide.

  3. Open your website. The chat button appears in the corner you chose.

  4. Send a test message and check that it arrives in your Inbox.

If you added allowed origins, make sure your website’s address is in the list, including https:// and any www..

Change settings later

Section titled “Change settings later”

Go to Settings > Channels, open the … menu on the web chat channel and select Webchat Settings. Changes to colours, text and the visitor form apply to the widget already on your site. You don’t need to change the embed code.

Regenerate the key

Section titled “Regenerate the key”

If your embed code has been copied somewhere it shouldn’t be, select Regenerate key in Web Chat Settings and confirm.

Disconnect and reconnect

Section titled “Disconnect and reconnect”

Open the … menu on the channel in Settings > Channels and select Disconnect channel to turn the widget off. Your conversations are kept. To turn it back on, select Reconnect channel. Web chat reconnects immediately, with no sign-in.

Section titled “Related”