Website widget
A “Text us” button for your website. A visitor leaves their name, number and question, and gets a text from your own number, so the conversation continues in Messages rather than in a chat window.
The widget is one script tag. It puts a small Text us button in the corner of your site. A visitor taps it, types their name, mobile number and question, and presses Send. BlueBot adds them to your contacts, texts them from your own number straight away (“Thanks Dana, this is Maria at Sparkle Cleaning. I’ll text you back shortly.”), and tells you their question by email or Slack. When you reply from your iPhone, your Mac or the BlueBot inbox, they get it as an ordinary text.
A chat window ends when the visitor closes the tab. A text stays on their phone, from a number they can save and reply to tomorrow.
Add it to your site
Make a widget
In BlueBot, open Automations → Website widget and press New widget. Under Allowed sites, add each address the widget will run on, such as https://sparkleclean.com and https://www.sparkleclean.com. The widget works only on those, so nobody can copy your tag onto another site.
Set it up
Choose the look and the words (the options are below). The preview on the right shows the button and panel as visitors will see them.
Copy the tag
Copy the script tag from the widget’s page. Its data-key is the widget’s own key, starting wk_:
<script src="https://usebluebot.com/widget.js" data-key="wk_1Hq2LxW9cVbN3mKpRtYs0a" async></script>The widget key is meant to be seen in your page’s source. It can only open this widget on your allowed sites; it isn’t an API key and can’t read or send anything else.
Paste it into your site
Put the tag on every page, right before </body>. Where that is depends on how the site was built:
| Site builder | Where the tag goes |
|---|---|
| WordPress | Your theme’s footer, or any plugin that adds code to every page. |
| Squarespace | Settings → Advanced → Code Injection → Footer (on plans that allow code injection). |
| Wix | Settings → Custom Code → Add Custom Code, placed in Body - end on all pages. |
| Webflow | Site settings → Custom code → Footer code, then publish. |
| Shopify | Online Store → Themes → Edit code, in theme.liquid right before </body>. |
| Your own HTML | Before </body> in your layout. |
Options
Everything about the widget is set on its page in BlueBot, so changing the look or the words never means editing your site again.
| Option | Default | What it does |
|---|---|---|
| Button label | Text us | The words on the button. |
| Colors | BlueBot blue | The button’s color and the panel’s accent. Pick your brand’s; BlueBot keeps the text on them readable. |
| Position | Bottom right | Bottom right or bottom left. |
| Heading | Text us. We’ll reply from our phone. | The first line of the panel. |
| Question prompt | What can we help with? | The label over the question box. |
| Consent line | By sending, you agree to get texts from your business name (or “us” until you set one) about your question. | Shown above Send. |
| First text | Thanks {{first_name}}, this is your business name. We got your question and will text you shortly. | The text BlueBot sends the visitor from your number. {{first_name}} and {{last_name}} come from the form. Until you set a business name under Settings, it leaves out “this is …”. |
| Tags | website | Tags for the new contact. |
| Tell me | Where the visitor’s question goes: email, Slack, or both, through your notification settings. | |
| Allowed sites | None | The addresses it runs on. A page anywhere else shows no button. |
What happens when a visitor sends
- The panel checks the number as they type and won’t send one it can’t read.
- BlueBot adds them to your contacts with
created_via: "widget"and your tags, or updates the contact if they’re already there. - BlueBot queues your First text to them from your number, with
source: "widget". It goes through your sending rules like every text, so a question asked at 11 PM gets its reply after your quiet hours end, and nobody is woken by it. - You get their name, number and question by email or Slack, and the conversation shows in your inbox with your first text.
- The panel thanks them and says to watch for a text from your number.
A visitor on your stop list gets no text, and you still get their question. A visitor who texted STOP before and now writes to you through the widget is still stopped; they can text START to your number to hear from you again.
Privacy and abuse
- The widget sets no cookies and loads no third-party scripts. It reads nothing from the page it’s on.
- A hidden field catches most bots, and each visitor can send only a few times an hour.
- Strangers through the widget count toward your new-people-per-day limit (50 by default), which caps how many texts a flood of fake submissions could send.
- If your site sets a Content Security Policy, allow
https://usebluebot.cominscript-srcandconnect-src.
Test it
Add http://localhost:3000 (or wherever you preview your site) to Allowed sites while you build, and take it out afterwards. Open the page, press Text us and send the form with your own mobile number.
| You got | It means | Do next |
|---|---|---|
| Your first text on your phone, and the question by email or Slack | It works. | Remove any test address from Allowed sites. |
| No button on the page | The page’s address isn’t in Allowed sites, or the tag isn’t on the page. | Compare the address bar with Allowed sites, www included. |
| The panel says it couldn’t send | Too many tries from your connection, or the widget was turned off. | Wait a few minutes, and check the widget is on. |
| The question arrived but no text | You’re in quiet hours, your Mac is offline, or your own number is on your stop list. | Look at the text in the inbox; its hold says why. |
walks through it for a real business and covers the replies too.