Create and embed customizable support widgets on your website. Choose between AI-powered chatbots or direct WhatsApp communication.
Overview
Surgio's Widgets allow you to add instant customer support to your website without writing complex code. Choose between an AI-powered chatbot or a direct WhatsApp connection, both fully customizable to match your brand.
Widget Types
Surgio offers two types of widgets to suit different communication needs:
AI Chatbot
An intelligent AI assistant trained on your website content. Powered by GROQ AI, it can answer questions, provide support, and guide visitors 24/7.
- Automated responses based on your content
- Customizable knowledge base
- FAQ integration
- Full brand customization
WhatsApp Widget
A direct communication channel to your WhatsApp Business number. Visitors can instantly start a conversation with your team.
- Direct WhatsApp integration
- Instant personal communication
- Customizable welcome message
- Branded appearance
Creating a Widget
Navigate to Widgets
Go to the Widgets section in the dashboard sidebar.
Choose Widget Type
Click Create Widget and select your preferred type: AI Chatbot for automated AI-powered support, or WhatsApp Widget for direct messaging.
Customize & Deploy
Configure your widget's appearance, settings, and content, then copy the embed code to add it to your website.
AI Chatbot Features
The AI Chatbot widget offers advanced customization and intelligence features:
Appearance Customization
- Brand Color: Customize the primary color for the chat interface
- Logo/Avatar: Upload your company logo or custom avatar
- Welcome Message: Set a personalized greeting
- Position: Choose bottom-left or bottom-right placement
AI Configuration
- GROQ API Key: Connect your own GROQ API for AI responses
- Knowledge Base: Train the AI on your website content (see below)
- FAQ Integration: Add frequently asked questions for quick answers
Knowledge Base & AI
Website Scraping
Enter your website URL to automatically scrape content. The AI will learn from your pages and use that information to answer user queries accurately.
GROQ API Key
Connect your own GROQ API key to power the AI's intelligence. This gives you full control over the AI model's performance and usage.
FAQ Integration
Add a dedicated "Frequently Asked Questions" section to your widget for instant answers:
- Accordion View: Users can browse FAQs in a clean, collapsible list.
- Easy Management: Add, edit, and delete questions directly in the widget builder.
- Navigation: Users can easily switch between the FAQ view and the AI chat.
WhatsApp Widget Features
The WhatsApp widget provides a direct communication channel to your WhatsApp Business number:
Setup
Simply enter your WhatsApp Business number in international format (without the + sign). For example: 15551234567 for a US number.
Customization
Customize the welcome message, add your logo, and choose the widget position. The widget maintains WhatsApp's signature green branding for instant recognition.
Note: When visitors click the WhatsApp widget, they'll be directed to start a conversation with your WhatsApp number. Make sure your WhatsApp Business account is active and ready to receive messages.
Integration
Embedding your widget is simple—just copy and paste a code snippet. We provide ready-to-use integration guides for all major platforms and frameworks.
Supported Platforms & Frameworks
When you create a widget, you'll find tailored code snippets in the Install tab for:
Web Platforms
- • HTML / Vanilla JS
- • Shopify
- • WordPress
- • PHP
React Ecosystem
- • Next.js
- • React
- • Remix
- • Gatsby
Other Frameworks
- • Vue.js
- • Svelte
- • Angular
- • Astro
- • Solid.js
Backend Frameworks
- • Python / Flask
- • Django
- • Laravel
Quick Start: Navigate to your widget's Install tab in the dashboard to access framework-specific code snippets with detailed integration instructions.
Example HTML snippet:
<script>
(function() {
var script = document.createElement('script');
script.src = 'https://surgio.com/widget.js';
script.setAttribute('data-widget-id', 'YOUR_WIDGET_ID');
script.async = true;
document.body.appendChild(script);
})();
</script>