Webchat
Documentation
Back to Documentation

Webchat Widget

The ReplyBase webchat widget is a lightweight, customizable chat interface that you can embed on any website. It supports real-time AI conversations, lead capture forms, and custom styling.

Installation

HTML Snippet

Add this script tag to the <head> or just before the closing </body> tag of your website.

<script
  src="https://cdn.replybase.co.uk/webchat/v1.js"
  data-public-key="YOUR_PUBLIC_KEY"
  async
></script>

React / Next.js Implementation

For modern frameworks, we recommend using a useEffect hook to load the script safely.

"use client";
import { useEffect } from "react";

export default function WebchatWidget() {
  useEffect(() => {
    const script = document.createElement("script");
    script.src = "https://cdn.replybase.co.uk/webchat/v1.js";
    script.async = true;
    script.setAttribute("data-public-key", "YOUR_PUBLIC_KEY");
    document.body.appendChild(script);

    return () => {
      document.body.removeChild(script);
    };
  }, []);

  return null;
}

Customization

You can customize the appearance of the widget directly from the ReplyBase Dashboard or via data attributes.

Theme Colors

Match your brand by setting primary and secondary colors.

data-primary-color="#6366f1"

Greeting Message

Change the initial message shown to users.

data-greeting="Hi there! How can I help?"

Widget Position

Choose which corner of the screen the widget appears in.

data-position="bottom-right"

Avatar Image

Upload a custom logo or assistant photo.

data-avatar-url="https://..."

Branding

On the Free and Launch plans, a subtle "Powered by ReplyBase" link appears at the bottom of the chat panel. This helps visitors discover ReplyBase when they are impressed by the AI and want to add it to their own site.

i

What visitors see

A single line at the bottom of the chat panel reading "Powered by ReplyBase" with a link to replybase.co.uk. It is styled to be subtle — grey text, no logo — and does not interfere with the conversation.

Remove the branding

Upgrade to the Grow plan (£49/mo) or above to remove the "Powered by ReplyBase" footer entirely. Business plan subscribers can also configure their own logo and brand colors via Settings → Branding.

Mobile Responsiveness

The widget automatically scales for mobile devices. When opened on mobile, it expands to take up the full screen for a native chat experience.

Pro Tip

Use the data-mobile-only="true" attribute if you only want the chat widget to appear for mobile visitors.

API Reference

Deep dive into the webchat Javascript API.

View API Docs