RobofyEmbed Calendly, Cal.com, Google Calendar, or another booking tool you can embed. Visitors see open times and confirm a meeting inside the widget.
Website AI Widget
Add an AI chatbot widget that feels like part of your site.
Set the colors, labels, and greeting to match your site. Add booking tabs, lead forms, and quick questions, check each change in the live preview, then install it with an asynchronous script tag or iframe.
- Live preview
- Asynchronous script or iframe
- Mobile controls
Overview
What is the Robofy Website Widget?
The Website Widget is the customer-facing home for your public Robofy agent. Visitors can ask a question without leaving the page they are reading or digging through documentation first.
Around that conversation, you decide what visitors see. Rewrite the labels, add a booking calendar, suggest questions, collect contact details, and add shortcuts to WhatsApp or other pages, all inside the same window.
What visitors can see
- Header title and subtitle
Tell visitors what this agent can help with before they type.
- Welcome banner
Cards above the chat box. Each card can show an image, a headline, a short description, and action buttons.
- Quick questions
Questions visitors can tap instead of typing.
- Message field
Rewrite the placeholder, the end-session labels, and the loading messages.
- Bottom tabs
Tabs for booking, WhatsApp, a social profile, an embedded page, or an external link.
Your brand voice
Make the widget sound like your team.
Visitors notice the small stuff. A generic “How may I assist you today?” can make an otherwise polished site feel impersonal. Rewrite the interface copy so it fits the way your company talks.
Labels you can rewrite
- Header title
- Ask Harbor
- Subtitle
- Plans, shipping, and setup
- Chat tab label
- Chat
- Input placeholder
- Ask about pricing plans, setup, or integrations…
- End session
- End chat
- Download transcript
- Download transcript
Loading messages
Write your own messages to show while the agent works.
- Checking the knowledge base…
- Looking for the right option…
- Reading the plan details…
- Preparing your answer…
Beyond chat
Visitors can book, message, or browse without leaving the widget.
Some visitors would rather book a call than keep typing. Turn on tabs so they can book a meeting, move to WhatsApp, visit a social profile, or open another page from the widget.
- Calendly
- Cal.com
- Google Calendar
- X
- TikTok
- YouTube
- Custom
Lead capture
Pre-chat forms and quick questions
Collect visitor details before the chat
If your team needs contact information before a conversation starts, turn on the pre-chat form. Change the title and supporting text, reorder the fields, set required inputs, add placeholders, and rewrite the submit button.
Field types: Text, Email, Phone, Textarea, Number, and Date. When the form is enabled, at least one Email or Phone field must be required.
Sales inquiry
Tell us how to reach you. Then the chat opens.
Work email *alex@northline.examplePhone+1 555 010 0142Start chatOne-click quick questions
A blank chat box makes people stop and think about what to type. Give them a starting point instead. Add clickable questions based on what customers already ask.
- How does the free trial work?
- Do you offer custom pricing?
- Can I book a demo from this page?
- Which plan includes a booking tab?
One tap sends the question.
Welcome banner
The welcome banner shows offers, plans, or locations before anyone types.
The banner sits above the chat input. Use it for an offer, a popular package, a location, a new release, or anything else people should see straight away.
Each card can show an image, headline, short description, and action buttons that send a prepared message or open a URL.
Look and behavior
Make it fit your site and your rules.
Match the widget to the page around it. You choose how it looks, where it sits, and how it behaves.
Launcher position
Theme and position
Switch between light and dark modes, place the launcher on the bottom-right or bottom-left, set the chatbot icon by URL, and apply a preset or custom hex color.
Who sees it, and how it opens
- Choose whether the widget appears on phones and tablets or stays desktop-only.
- Choose whether it opens on page load, shows suggested questions during the chat, and displays the sources used for an answer.
- Offer real-time voice chat when voice is configured for the agent.
- Link other public agents, such as Billing, Sales, and Support, so visitors can choose between them in the same widget.
Developer control
Custom CSS and JavaScript for everything else
The built-in controls handle colors, position, and behavior. For anything they don't cover, add custom CSS or JavaScript in the widget settings.
Use custom CSS for changes outside the standard controls, such as typography, borders, shadows, or spacing. Test all custom CSS and JavaScript across the pages, browsers, and devices your website supports before publishing it.
Custom CSS
/* Typography, borders, shadows, or spacing.
Test this on the pages you support. */Custom JavaScript
// Add JavaScript only after you have
// checked it on your own pages.Consent & overlay
Put a clear notice in front of the chat when you need one.
If your workflow needs a disclaimer, welcome screen, or explicit consent before a visitor starts chatting, enable Consent & Overlay.
- Pick a built-in Shield, Lock, Info, Warning, Document, or Eye icon, or use an emoji.
- Add buttons that accept and remember consent, decline and close the widget, dismiss and continue without saving consent, or open a policy link while the overlay stays visible.
- Add footer links, such as Privacy Policy or Terms of Service.
- Choose how many days to remember the choice, or keep it for the current session only.
- Choose whether chat history is stored in the browser.
Robofy gives you controls for presenting notices and gathering consent. These controls do not, by themselves, make a site legally compliant. Your organization remains responsible for its wording, lawful basis, data handling, and implementation.
Installation
Add the widget with a script tag or iframe.
Pick the method that suits your site and copy the snippet from your Robofy Installation page. The samples below only show where the code goes. They won't work if you copy them.
Recommended
Asynchronous script tag
Paste the snippet just before the closing body tag. It loads asynchronously, so the rest of the page doesn't wait for it.
<!-- Copy from Robofy → Installation -->
<script async src="…"></script>
</body>Fixed area
Iframe embed
Place the agent in a dedicated page or section when the conversation needs a larger, fixed area.
<iframe
title="Harbor assistant"
src="…">
</iframe>Guided setup
- WordPress
- Shopify
- Wix
- Google Tag Manager
Same agent, more channels
- Facebook Messenger
The WordPress plugin card is shown for the Robofy brand. White-label partners won't see it.
From draft to live
Get the widget live in five steps.
Pick the agent, set the look and the visitor paths, check everything in the live preview, then paste one snippet.
Build your widget- 1
Pick your agent
Choose the public AI agent visitors should use.
- 2
Set the look and copy
Pick the color, set the chatbot icon, write the labels, and add custom loading messages. Use the live preview to check each change.
- 3
Set up conversation paths
Turn on pre-chat lead capture, add quick questions, and configure tabs for booking, WhatsApp, social profiles, embedded pages, or external links.
- 4
Configure display and consent
Set the widget position, choose whether it appears on mobile, decide how it opens, and enable an overlay if visitors need to see a notice before chat.
- 5
Test and install
Check the widget on desktop and mobile. When it is ready, copy the asynchronous script and place it before the closing body tag, or use the iframe option.
Use cases
Ways teams use the Website Widget
SaaS support and demos
Answer product questions, show common starting points, collect work email and company details, and place a booking calendar in the bottom navigation.
Ecommerce discovery
Show product or category cards in the Welcome Banner, answer policy questions, and send shoppers to the right page or WhatsApp conversation.
Multi-location businesses
Use tabs and cards to show locations, invite location-specific questions, and link people to the right booking or enquiry path.
Agencies and white-label sites
Adjust labels, colors, attribution, CSS, and visitor paths for the site you are serving. Available branding controls depend on the selected Robofy plan.
Widget features and settings
Embed options, design controls, and behavior settings in one table.
View details
| Capability | Technical parameter |
|---|---|
| Embed options | Asynchronous script tag or iframe; guided setup for WordPress, Shopify, Wix, and Google Tag Manager |
| Design controls | Title, welcome message, placeholder, chatbot icon URL, light or dark mode, bottom-right or bottom-left position, preset or custom hex color |
| Tab types | Embedded page by URL or embed code, external link, WhatsApp, and social profile |
| Multi-agent linking | Link other public agents to the same widget |
| Quick questions | Clickable starter questions |
| Typing loaders | Custom rotating messages |
| Pre-chat fields | Text, Email, Phone, Textarea, Number, and Date; at least one Email or Phone field must be required |
| Welcome banner | A horizontal-scroll tab with optional auto-scroll and a grid tab; cards with an image, headline, description, and action buttons |
| Consent and overlays | Action buttons, footer links, and a preset icon or emoji |
| Consent memory | A set number of days, or the current session only |
| Behavior controls | Mobile visibility, open on page load, voice when configured, suggested questions, and answer sources |
| Custom code | Custom CSS and JavaScript |
| Preview | Live widget preview shown beside the dashboard controls |
FAQ
Frequently Asked Questions
Install, booking, lead forms, mobile visibility, and consent.
Will this widget block my page while it loads?
The recommended installation method uses an asynchronous script tag. It loads without blocking the rest of the page. Actual page performance still depends on the website, its other scripts, and how the widget is configured, so test the finished page before publishing.
Can I change the “Powered by” branding?
Not on the Free Tier. On other plans, the branding options depend on which Robofy plan you choose, so check the current plan details first.
Can visitors book a demo from the widget?
Yes. Add a booking tab with Calendly, Cal.com, Google Calendar, or another booking tool you can embed. Visitors pick a time without leaving the page.
What information can the pre-chat form collect?
It supports Text, Email, Phone, Textarea, Number, and Date fields. When the form is enabled, at least one Email or Phone field must be required.
Can I hide the widget on mobile phones?
Yes. A visibility setting lets you hide the widget on phones and tablets or allow it to appear on those devices.
Can I connect multiple agents to one widget?
Yes. Link Agents lets you connect other public agents to the same widget. Visitors can choose between focused agents when that option is enabled.
Can I show a consent notice before chat starts?
Yes. Consent & Overlay lets you set up a consent, disclaimer, or welcome screen with your own text, buttons, and policy links. It gives you the screen. It doesn’t make your site legally compliant on its own.
The Robofy platform
Features that work with the widget
Build your widget and see it before it goes live.
Sign up free, set your colors and labels in the live preview, then test the widget on desktop and mobile before you paste the script.