Webchat Overview
Overview
Webchat lets you embed a customizable chat widget on your website, allowing visitors to interact with your OwnChat assistant directly from any web page. This document covers setup, customization, configuration, and installation of the Webchat widget.
Accessing Webchat Settings
Click the Settings button.
Click Channel.
Click Webchat to open your web chat channel settings.
Click Overview to access the main dashboard and configuration summary.
Visitor Analytics
The Overview section includes geolocation data for your website visitors.
Countries Distribution — View visitor data broken down by country.
States Distribution — Explore visitor data by state.
Cities Distribution — View detailed visitor analytics by city.
Step 1: Identity
Enter a custom internal widget name to identify your chatbot uniquely within Ownchat.
Enter your bot name in the Public Bot Name field. This is the name visitors will see.
Step 2: Branding
Logo
Click the Branding section to expand it.
Click the logo upload area to add your custom brand logo.
Changes made in this section are automatically reflected in the live preview panel.
Background and Colors
Expand the Background & Colors section.
Click the color field to set your primary brand color.
Click the color picker to select your preferred brand color.
Click the end color picker to set the gradient ending color.
Click the Text Color field to customize the text color within the chat gradient.
Screen Alignment
Click Screen Alignment to choose where the widget appears on the page.
Select Left to position the widget on the left side of the screen.
Select Right to position the widget on the right side of the screen.
Enter the desired horizontal spacing value in the input field to adjust the widget's position.
Theme Presets
Click Theme Presets to choose from predefined color schemes.
Select a preset (for example, Ocean Breeze) to apply it to your chat widget.
To change the preset later, click the dropdown and select a different theme.
Step 3: Launcher Settings
Launcher Settings control the appearance and behavior of the chat button visitors see on your website.
Click Launcher Settings to expand the section.
Choose a launcher type:
Pill Launcher — Displays a pill-shaped launcher with text instead of the default bubble icon.
Robot — Displays a robot icon as the launcher.
Enter your launcher button text in the Text field (for example, "Ask Ownchat").
Select your preferred launcher size from the dropdown menu.
Click Launcher Icon to customize the bubble icon using your brand logo or chat icon.
Step 4: Content
Click Next to proceed to the Content configuration step.
Header Content
Expand the Header Content section.
Enter your main header title in the text field.
Enter a subtitle describing how quickly the assistant typically responds.
Quick Actions
Quick Actions display preset buttons that visitors can tap to start a conversation.
Click the Quick Actions section to expand it.
Click Add Action Button to create a quick action option.
Click the dropdown menu and choose the icon that best matches your button text.
Click the message icon to add quick question options.
Enter your custom button text for each action button.
Welcome Message
Expand the Welcome Message section.
Enter your greeting message in the text field.
Click Next to proceed to the next configuration step.
Step 5: Widget Logic
Widget Logic controls how the chat widget behaves after a visitor lands on your website.
Expand Widget Logic.
Select the greeting format:
Text Message — Display a text greeting.
Video — Display a video message as the greeting.
Set the auto-open delay in seconds. After a visitor lands on your page, the chat window opens automatically after the selected delay. A delay of 5–10 seconds is recommended.
Toggle Display Active Team Members to show team member presence status to visitors.
Toggle Sound & Notifications to enable browser alerts for new messages.
Enter the desired time limit in the Active Presence Timer field.
Step 6: Ask for Visitor Details
This section lets you collect visitor information before the chat begins.
Expand the Ask for Visitor Details section.
Enable Request Visitor Info to ask visitors for their details before starting the chat.
Select the information you want to collect:
Name
Phone Number
Email Address
From the dropdown, select the action you want to perform for each selected field.
Enable Remember Returning Visitors to recognize visitors who return to your site.
Use the Email field as a unique identifier to identify each visitor individually.
Step 7: Security
In the Security section, paste the URL of the website where you want to display the Webchat widget. This ensures the widget appears only on the specified website.
Saving Settings
After completing all settings, click Update to save your changes.
Exporting and Installing the Widget Script
Click Export Script.
Click the JavaScript dropdown and select your preferred programming language.
If you select Python, the code snippet is automatically converted to the Python version.
Copy the generated script.
Paste the script into your website before the closing </body> tag to integrate the Webchat widget.
Previewing the Webchat Widget
On our website's WebChat, every button can trigger a chatbot flow. This allows you to guide visitors through personalized conversations based on the button they click.
Summary
Step
What You Configure
Identity
Internal widget name and public bot name
Branding
Logo, colors, gradient, text color, screen alignment, theme presets
Launcher Settings
Launcher type, icon, button text, and size
Content
Header title, subtitle, quick actions, and welcome message
Widget Logic
Greeting format, auto-open delay, team presence, and notifications
Ask for Visitor Details
Visitor info collection and returning visitor recognition
Security
Restrict widget display to a specific website URL
Export & Install
Export the script and paste it into your website
Last updated