Guides

Add a “Text us” button to your website

Three ways to let website visitors reach your own number by text, from a plain sms link to BlueBot’s widget to a form whose posts become texts, and which to pick for your site.

Open in Claude Open in ChatGPT .md

Marcus runs Harbor Auto Detailing. Most of his customers would rather text than call, and his website has only a phone number. He wants a “Text us” button that starts a conversation with his own number, so the reply comes from him and the thread stays on his iPhone with everyone else he texts.

There are three ways to do it, and they suit different sites:

Way	What the visitor does	Who texts first	Best for
An `sms:` link	Taps it, and their phone opens a new text to you	The visitor	The simplest button, on a site visited mostly from phones
BlueBot’s widget	Types their name, mobile and question into a small panel	You, at once	Desktop visitors, and a reply you choose
A form whose posts go to a Text Hook	Fills in a form you already have	You, at once	Sites built with Webflow or a form builder

What you need

A BlueBot account with your Mac connected.
Somewhere to change your website’s HTML, or its form settings.

Way 1: an sms link

An sms: link opens the visitor’s own Messages app with your number filled in. It costs nothing and needs no script. On a computer it opens Messages on a Mac, and does nothing useful on most Windows machines, so it suits sites visited from phones.

Add the link

Put this wherever the button should be, with your own number:

A Text us button

<a href="sms:+15555550100?&body=Hi%20Harbor%20Auto%2C%20I%E2%80%99d%20like%20a%20quote%20for%20" class="text-us">
  Text us
</a>

The ?&body= part fills in the first words of the text, and the visitor finishes it. Writing it as ?& rather than ? or & alone is what makes it work on both iPhones and Android phones. Encode the words for a URL (a space is %20, a comma %2C).

Let BlueBot see texts from new people

A visitor who taps the link texts your number first. By default the Mac copies to BlueBot only the chats with people BlueBot has texted, so their text stays in Messages on your Mac and iPhone and never reaches BlueBot’s inbox or your webhooks.

To see them in BlueBot, open Settings in the dashboard and set Which chats to copy to Everything, or make this request:

PATCH/v1/settingsChange the sending rules →

curl -X PATCH "https://usebluebot.com/api/v1/settings" \
  -H "Authorization: Bearer $BLUEBOT_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "inbound_mode": "everything"
  }'

That copies every chat on your Mac, personal ones included. If your number is also your personal number, leave it on replies and answer these texts from your iPhone instead.

The widget is a small “Text us” button and panel in your colors that sits in the corner of your site. A visitor types their name, their mobile number and a question, ticks the line agreeing to texts, and presses Send. BlueBot adds them to your contacts and texts them from your number straight away, so the conversation is already in your inbox and on your phone when you answer. The widget is set up in the dashboard; it has no API.

In the dashboard, open Widget. Choose its colors and the words on the button. Under Allowed sites, add each address the widget will run on (https://harborautodetailing.example); the widget refuses to work anywhere else, so nobody can copy it onto another site and send texts from your number.

Write the first text

Write the text BlueBot sends when somebody presses Send. It can use the visitor’s first name:

Marcus’s first text

Thanks {{first_name}}, this is Marcus at Harbor Auto Detailing. I got your question and I’ll text you back shortly.

Under Notify me, choose to get an email when a visitor sends one, so you don’t miss it.

Paste the script

Copy the script tag the page shows and paste it before </body> on every page of your site, or in your site builder’s custom code setting for the whole site:

Before </body>

<script src="https://usebluebot.com/widget.js" data-key="wk_…" async></script>

data-key is the widget’s own key, not an API key. It can do one thing, from the sites you allowed, so it’s safe in your page’s HTML.

The widget sets no cookies and loads nothing but itself. It has a hidden field that only bots fill in, and it limits how often one visitor can send, so a script can’t use it to text strangers.

Way 3: a form that posts to a Text Hook

If your site already has a contact form built in Webflow or a form builder, its posts can become texts through a Text Hook. The form builder posts each entry to the hook’s address from its own servers, the hook texts the person from your number with your template, and their reply comes to you.

Make the Text Hook

In the dashboard, open Text Hooks, press New hook, name it “Website form” and copy its address.

Send the form’s entries to it

In Webflow, open the site’s settings, go to Apps & integrations, and under Webhooks add a webhook with the trigger type Form submission and the hook’s address. Other builders call it a webhook or a notification URL in the form’s settings; the steps for each app are in its recipe.

Map the post

Send one entry yourself and use your own mobile number. The hook’s test panel lists the fields the post had, by name only. Set Recipient to the phone field and write the text, pressing a field to put its path into the template:

Marcus’s template

Hi {{body.payload.data.Name}}, this is Marcus at Harbor Auto Detailing. Thanks for your message. What car is it, and when would suit you?

The path depends on how the form names its fields; the picker writes it for you. Turn on Create a contact with the tag website and save.

Test it

Use each way you set up with your own phone:

The sms link: open your site on your phone, tap the button and send the text. It arrives in Messages on your Mac.
The widget: open your site, press the button, and send your own name, number and a question.
The form: fill in the form with your own mobile number.

You got	It means	Do next
The widget’s or the hook’s text on your phone within a minute	It works.	Answer it from your iPhone or the inbox and check the reply reaches you both ways.
Your sms-link text in Messages, but not in BlueBot’s inbox	Which chats to copy is on People BlueBot has texted, so the Mac doesn’t copy a first text from somebody new.	Set it to Everything, or answer from your iPhone.
The widget shows an error on your site	Your site’s address isn’t under Allowed sites, often `www.` against no `www.`	Add the exact address the browser shows.
A post in the hook’s test panel but no text	The hook couldn’t read a phone number.	Point Recipient at the phone field.
The text waiting with `hold.reason: "quiet_hours"`	A visitor wrote after quiet hours began. The text goes in the morning.	Nothing; say on the site when you answer texts.

When it goes wrong

The sms link opens nothing on a computer. Windows has no default app for sms: links. Show your number beside the button too, or use the widget for desktop visitors.
A visitor typed a landline. The widget’s text fails with a failure.reason, shown in Messages. Call them instead.
Somebody is sending junk through the widget. Take the widget off the site, or change its allowed sites, from Widget. Junk sent through a Text Hook stops when you delete the hook and make a new one with a new address.
Too many new people in a day. Each widget or form entry is a new person, and your sending rules allow 50 a day by default. Past that, texts wait until midnight with hold.reason: "daily_new_people_limit".

The widgetEvery widget setting, allowed sites and how it guards against bots.Text HooksPresets, mapping and the test panel.Keyword auto-replyAnswer common questions automatically.Receiving textsWhich chats the Mac copies, and what an incoming text carries.Webflow recipesWebflow forms through a Text Hook or Zapier.