Skip to main content
All CollectionsAdd Contacts More Tools
Creating a Click-to-Text Button
Creating a Click-to-Text Button

In this step-by-step article, we'll show you how to embed a click-to-text button on your site that launches your visitor's SMS app.

Drew Wilkinson avatar
Written by Drew Wilkinson
Updated over 2 years ago

A Click-to-Text button is a quick way to optimize the mobile experience of your website and make it easier for your customers to get in touch. 

Find out how to make one in minutes with our click-to-text button generator

Customize Your Button

1. Once you've accessed the click-to-text button generator, go to the left-hand panel. 

Start by selecting the preferred layout of your button by clicking the Type drop-down menu. (It automatically defaults to "Text + icon left".) 

SimpleTexting Tip — Watch your Changes Materialize in Real-Time☝️

The button to the right of the panel will instantly represent all of the changes you make.

2. You can choose a custom icon that best describes the button's label by clicking on the existing icon and choosing from our icon database

You can also update your button's label to text that makes sense for your specific use-case. (E.g. here we have made the label "Schedule Visit" and the icon a calendar.)

Write Your Default Message and Add Your Number

3. When a website visitor taps on the Click-to-Text button, the SMS app on their cellphone will launch with a pre-written message as well as a pre-filled phone number. 

4. Input the number you want to use to receive the text messages as well as a pre-written SMS that either uses your keyword or has other templated text related to your button.

Edit the Button's Positioning and Margins

Now it is time to select your button's positioning and margins.

5. Position determines where the click-to-button will appear on the pages you place it on. Choose whether you want your button to appear at the bottom right, bottom, or left of your page.

6. Edit the Margin. Margin controls how far away the button is from other elements and is dependant on the position that you select for the button. 

For example, if you choose the position "center-bottom", you can control the margin only from the bottom of the page. If you select the position "bottom-right", you can control the margin from the bottom AND the right of the page. 

Style the Button

7. To customize the design of your button, click Styling, located to the right of Settings:

8. Underneath button background, you can edit the background color, button color, corner roundness, and shadow:

9. Underneath Label style, you can also pick the font family, font color, font size, font positioning, and bold or italicize it. 


Preview your Click-to-Text Button

Throughout the process of customizing the click-to-text button's settings and styling, you can preview the final result.

10. Simply select Preview in the center of the tool.

11. Once you click Preview, you can see a mock-up of your button, and it's positioning.

 

You can move between the design and preview tab until everything is pixel perfect.

Add it to your website

12. Once you are ready to add your click-to-text button to your website, select Embed in the right-hand corner.

13. A pop-up will appear with your button's automatically generated code: You're almost there. 

14. Copy the code and paste it into the footer of the webpages that you want the button to appear on.

15. Now you're done! When someone visits your site they'll be presented with your button!

Did this answer your question?