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://..."

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