# 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. 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: ```html title="A Text us button" Text us ``` 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: ```bash curl -X PATCH "https://usebluebot.com/api/v1/settings" \ -H "Authorization: Bearer $BLUEBOT_API_KEY" \ -H "Content-Type: application/json" \ -d '{ "inbound_mode": "everything" }' ``` ```ts import BlueBot from '@usebluebot/sdk'; const client = new BlueBot({ apiKey: process.env.BLUEBOT_API_KEY }); const settings = await client.settings.update({ inboundMode: 'everything', }); console.log(settings); ``` ```python import os from bluebot import BlueBot client = BlueBot(api_key=os.environ["BLUEBOT_API_KEY"]) settings = client.settings.update(inbound_mode="everything") print(settings) ``` 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. ## Way 2: BlueBot’s widget 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. ### Set up the widget 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: ```text title="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 `` on every page of your site, or in your site builder’s custom code setting for the whole site: ```html title="Before " ``` `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. > **Never put a hook’s address in your page.** A Text Hook’s address works like a password: anything that posts to it makes your number text whoever the post names. Give it only to a service that posts from its own servers, such as Webflow’s form webhooks or Typeform. A plain HTML form with the hook in its `action` shows the address to every visitor and to every bot that reads your page. For a form you build yourself, use the widget, or send from your own server with the API. ### 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](https://usebluebot.com/docs/recipes). ### 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: ```text title="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"`. ## Next - [The widget](https://usebluebot.com/docs/widget): Every widget setting, allowed sites and how it guards against bots. - [Text Hooks](https://usebluebot.com/docs/text-hooks): Presets, mapping and the test panel. - [Keyword auto-reply](https://usebluebot.com/docs/guides/keyword-auto-reply): Answer common questions automatically. - [Receiving texts](https://usebluebot.com/docs/sending/receiving): Which chats the Mac copies, and what an incoming text carries. - [Webflow recipes](https://usebluebot.com/docs/recipes/webflow): Webflow forms through a Text Hook or Zapier.