5 minute setup

Quick Start Guide

Create your first professional chat widget and deploy it to your website in just a few minutes.

Prerequisites

ChatWidgetPro account (free)

Webhook URL (n8n or API)

Access to website HTML

Getting Started

Create Your Account

Verify email - Click the verification link in your inbox

Create Your First Widget

You can start from a template or create a blank widget. Templates are the fastest way to get started.

From Template (Recommended)

1. Go to Templates page
2. Browse and preview templates
3. Click "Use This Template"
4. Customize in the editor

From Scratch

1. Go to Dashboard
2. Click "Create New Widget"
3. Enter a widget name
4. Start with blank canvas

Your dashboard shows all widgets and quick actions

Configure Your Widget

The visual editor has multiple tabs for customizing every aspect of your widget.

Bubble

Custom icon upload
Size & position
Background color
Auto-open behavior

Appearance

Primary & secondary colors
Font selection
Bot & user avatars
Header styling

Behavior

Welcome message
Starter prompts
Typing indicator
Auto-open delay

Integration

Webhook URL
Auth token
Custom headers
Test connection

Widget Editor

The visual editor with live preview

Connect Your Backend

Set Up Your n8n Workflow

If you're using n8n, create a workflow that receives messages and returns responses.

n8n Setup Steps:

Add Webhook node - Set method to POST

Copy Production URL - This is your webhook URL

Process the message - Add your AI or logic nodes

Respond to Webhook - Return JSON with "response" field

n8n

A typical n8n workflow connected to ChatWidgetPro

Expected Response Format

Your webhook must return JSON with a "response" field:

Response Formatjson

{
  "response": "Hello! How can I help you today?"
}

Test Your Widget

Use the live preview in the editor to test your widget before deploying.

Testing Checklist

Click the bubble to open the chat window
Send a test message
Verify you receive a response
Check styling matches your brand

No Response?

If you don't receive a response, check that your webhook URL is publicly accessible and returns the correct JSON format.

Deploy to Your Website

Save and Get Embed Code

Save your widget and copy the embed code to add to your website.

1. Save Widget

Click "Save" in the editor to save all changes

2. Get Code

Click "Get Code" to view your embed snippet

3. Copy

Click copy button to copy to clipboard

Add to Your Website

Paste the embed code into your website's HTML, just before the closing body tag.

Embed Code Placementhtml

<!DOCTYPE html>
<html>
<head>
  <title>My Website</title>
</head>
<body>
  <!-- Your website content -->

  <!-- ChatWidgetPro Widget -->
  <script
    src="https://chatwidgetpro.com/embed/widget.js"
    data-widget-id="your-widget-id"
    defer>
  </script>
</body>
</html>

That's It!

Deploy your website and the chat widget will appear automatically. Your widget is now live and ready to engage visitors!

What's Next?

Congratulations on deploying your first widget! Here are some powerful features to explore:

Chat Streaming

Real-time responses

Voice Input

Speech-to-text

File Upload

Share attachments

Analytics

Track engagement

n8n Integration Guide

Detailed guide for connecting n8n workflows with advanced configurations.

Customize Appearance

Learn how to style your widget to perfectly match your brand.