Embed the SMS opt-in button

The Wallet portal generates a short script that adds a text-to-join button to your website. On a phone, tapping it opens the visitor's Messages app with your number and keyword already filled in, so joining your SMS list is one tap on Send.

This page is the technical reference for that script: where it goes, when it shows, and how to style it. For where to find it in the portal and how to set up keywords, see Turn website visitors into text subscribers on the Wallet Forum.

Get the snippet

The portal generates two versions. They work the same way and differ only in the button text and the keyword they send.

Copy the code from the left-hand side of the pop-up. Your number and keyword are already in it.

Placement

The script inserts the button immediately before its own <script> tag. It finds that tag as the last script in the document at the moment it runs, so:

• Paste it inside <body>, exactly where you want the button to appear. In <head> it has nowhere visible to go.
• Don't add async, defer or type="module", and don't load it through a tag manager or inject it after the page loads. Each of those runs it later, when the "last script" is a different one, and the button lands somewhere unexpected or not at all.
• Paste the full snippet once for each place you want a button. Two buttons on one page is fine.

The script has no dependencies: no jQuery, no framework, no external stylesheet. It's plain JavaScript.

When the button shows

The button is only added on devices that can send a text. The script checks once, when the page loads, and adds the button if either is true:

• the browser window is taller than it is wide, or
• the browser identifies itself as a mobile device.

Two consequences:

• You won't see it on a normal desktop browser. To develop against it, turn on device emulation in your browser's developer tools (Chrome: Toggle device toolbar), then reload. The check only runs on load.
• A desktop window resized to portrait also shows it. Clicking it there opens whatever the computer uses for sms: links, if anything.

For desktop visitors, show the website QR code from the same pop-up instead. They scan it with their phone.

Styling

The button carries the class btn-wallet-sms-opt-in and no styles of its own, so it inherits your site's default <button> styling. Target the class to change it:

.btn-wallet-sms-opt-in {
  background: #2f6473;
  color: #fff;
  border: 0;
  border-radius: 8px;
  padding: 12px 20px;
}

To change the label, edit the buttonText value near the end of the snippet. Leave number and body as generated.

What a tap does

The button opens an sms: link with your number as the recipient and your keyword as the message. iPhone and iPad use sms:<number>&body=<keyword>; everything else uses sms:<number>?body=<keyword>.

Nothing is sent until the visitor presses Send. When the text arrives, Wallet handles it like any other keyword message: the opt-in keyword subscribes them, and the help desk keyword opens a help desk conversation.

Wix

Wix doesn't run a pasted script where it sits on the page, so this snippet won't place itself correctly there. The forum guide covers the Wix setup: Turn website visitors into text subscribers.

Help

Email [email protected].