Live Chat - set up your widget

Create Your Live Chat Widget

Create your Live Chat widget, style it, paste two lines into your site and verify your address. Visitors chat on your page; your agents reply from the dashboard.

Create a Live Chat widget See how it works
  • Real-time messaging with typing indicators
  • Pre-chat questions and offline messages
  • Runs only on your verified website

How it works

  1. 1

    Create your widget

    Choose your brand colours, welcome message and pre-chat questions. Free account required.

  2. 2

    Paste two lines of code

    Copy the snippet into your site before the closing body tag, or use one of the step-by-step guides for 31 platforms.

  3. 3

    Check the installation

    Verify your website address, then answer chats as they arrive.

Everything your team needs

  • Real-time conversations

    Typing indicators, delivery status and messages that survive a refresh or a dropped connection.

  • Team inbox and routing

    Invite agents by email, group them into departments and route chats manually, round robin or to the least busy agent.

  • Business hours

    Weekly hours per department plus special days, so visitors know when you are around.

  • Pre-chat questions

    Ask for a name, email, phone, subject, department or reference - each hidden, optional or required.

  • Offline messages

    When nobody is available, visitors leave a message instead. No reply time is promised that you cannot keep.

  • Canned responses and ratings

    Save answers to common questions, ask for a rating at the end, and email visitors their transcript.

  • Your brand

    Colours with contrast checks, light or dark theme, corner radius, launcher label, greeting bubble and mobile fullscreen or compact.

  • Analytics

    Conversations, agents, departments, ratings and installation health in your dashboard.

Works with your website

Step-by-step installation guides for 31 platforms, including notes on caching, content security policies and single-page apps.

  • Any website (HTML)
  • Google Tag Manager
  • Cloudflare Zaraz
  • WordPress
  • WooCommerce
  • Shopify
  • Blogger
  • Ghost
  • Joomla
  • Drupal
  • Wix
  • Squarespace
  • Webflow
  • Google Sites
  • Magento / Adobe Commerce
  • PrestaShop
  • OpenCart
  • React
  • Next.js
  • Angular
  • Vue
  • Nuxt
  • ASP.NET Core
  • ASP.NET Web Forms
  • PHP
  • Laravel
  • CodeIgniter
  • Django
  • Flask
  • Ruby on Rails
  • Node.js / Express

Good to know

  • File attachments are switched off until file scanning and secure storage are finished.
  • There are no chatbots or automated replies - every answer comes from a person.
  • The widget only runs on the website address you verify, so nobody can copy your code onto another site.
  • Messages are stored so conversations survive a refresh and you can read them later; A2Z Tools staff cannot read them by default.
  • Pricing is not settled yet. We will tell you well before anything changes.

Other widgets

Be there when your customers need you

Create your Live Chat widget, style it and paste it into your site. You can change anything afterwards.

Create a Live Chat widget See my widgets

Related Tools

More tools in the same category

Other Tools

Popular tools from across A2Z

Quick answer

To create a live chat widget with A2Z Tools, sign in and open /live-chat/edit, design the widget and its pre-chat form, register the website address it may run on, and add the embed code to your site. Replies come from your team in the A2Z Tools dashboard.

Key facts

  • Created at /live-chat/edit; an A2Z Tools account is required
  • Text: brand name, welcome message, introduction, launcher label, greeting bubble, offline message
  • Colours for brand, header, text and launcher, with contrast checks
  • Light, dark or auto theme, corner radius, left or right side
  • Mobile fullscreen or compact, desktop or mobile display, delay and page targeting
  • Pre-chat fields (name, email, phone, subject, department, reference, consent) each hidden, optional or required
  • Runs only on your registered website address
  • File attachments are switched off; pricing is not settled yet

What is this tool?

This is the builder for A2Z Live Chat, the hosted chat that runs inside your own website. The widget is the part your visitors see: the launcher button, the greeting bubble and the chat window. Everything about it - wording, colours, theme, layout, where and when it appears, and what it asks before a chat - is set here.

It is different from the free link-out widgets such as the WhatsApp chat widget, which send the visitor to another app. Here the conversation stays on your website and your team answers from the dashboard.

How to use it

Open /live-chat/edit while signed in. Start with the wording and colours, because the preview and contrast checks help most at that stage, then move on to behaviour (delay, devices, pages) and the pre-chat form.

  1. Sign in to A2Z Tools and open /live-chat/edit.
  2. Enter the brand name, welcome message, introduction, launcher label, greeting bubble and offline message.
  3. Choose colours, theme, corner radius, side and mobile layout, and fix any contrast warnings.
  4. Set the delay, desktop or mobile display and page targeting.
  5. Decide which pre-chat fields are hidden, optional or required, and add consent text with privacy and terms links.
  6. Register your website address, then add the embed code to your site.
  7. Invite agents and set departments and business hours in the Live Chat dashboard.

Example

Settings for an online course provider: brand name "Brightpath Learning"; launcher label "Ask a question"; greeting bubble "Questions about enrolment?"; auto theme; corner radius medium; mobile compact; shown after a short delay on course and pricing pages only; pre-chat form with name required, email required, subject optional, phone hidden; consent text linking to the privacy policy.

Result: visitors on course pages see the greeting after the delay; opening the launcher shows the short form, then the chat window in the brand colours.

Common use cases

  • Matching the chat window to your brand colours and dark mode
  • Showing chat only on pricing, checkout or course pages
  • Collecting a name and email before a chat starts
  • Adding consent wording with privacy and terms links
  • A compact mobile layout that does not cover the page

Benefits

  • Readable by design. Contrast checks warn when colours are hard to read.
  • Shown where it helps. Delay, device and page targeting keep the chat off pages where it distracts.
  • Ask only what you need. Every pre-chat field can be hidden, optional or required.
  • Light on page load. A loader of about 17 KB; the chat interface loads only when opened.

Limitations

  • Registered website only. The widget runs only on the address you register.
  • No file attachments. Attachment sending is switched off.
  • No chatbot. Replies come from people; outside business hours the offline form takes a message without a promised reply time.
  • Pricing is not settled yet. Live Chat is not described as free.

Privacy & your data

Conversations

Chats are hosted and stored by A2Z Tools so they survive page refreshes. Your invited agents can read them; A2Z Tools staff cannot read conversations by default. Retention is managed by category.

What you ask visitors

Only the pre-chat fields you enable are collected - name, email, phone, subject, department, reference and consent - each hidden, optional or required. Visitors can have the transcript emailed to their own address.

Consent text

Add consent wording with links to your privacy policy and terms, and require the consent field if you need a recorded agreement.

Frequently asked questions

How do I create a live chat widget?

Sign in to A2Z Tools and open /live-chat/edit. Design the widget, set the pre-chat form, register your website address, and add the embed code to your site. Then invite agents and set business hours in the Live Chat dashboard.

Why do I have to register my website address?

The widget runs only on the website address you register. That stops somebody copying your chat code onto another site and sending chats to your team.

Can the chat window match my brand?

Yes. Set brand, header, text and launcher colours (contrast checks warn about hard-to-read combinations), a light, dark or auto theme, corner radius, left or right side, and fullscreen or compact layout on mobile. The brand name, welcome message, introduction, launcher label, greeting bubble and offline message are all editable.

Can I show the chat only on some pages or devices?

Yes. Choose page targeting, whether it shows on desktop, mobile or both, and a delay before it appears.

What can the pre-chat form ask?

Name, email, phone, subject, department, reference and consent. Each field can be hidden, optional or required, so you only ask for what you need.

Can visitors get a copy of the conversation?

Yes. A visitor can have the transcript emailed to their own address, and can rate the chat when it ends.

Can visitors send attachments, and is Live Chat free?

File attachments are switched off. Pricing is not settled yet, so Live Chat is not described as free.

Related tools

Last reviewed: