An opt-in widget is a great way to gain new subscribers by placing a pop-up on your website.
TapOnIt provides a low-code way for you to add this pop-up to your website by changing just a few pieces of information and placing it in your website code at the end of the <head> section of the page where the opt-in should appear.
Once the code block has been applied, the Opt-in Popup will appear unless the visitor has already filled out the form and has not cleared their cache and cookies since, or has closed the form in the past 48 hours and has not cleared their cache and cookies since.
Table of Contents
Getting Started
Before you upload your code to your website, you will need to locate your tenant name by referencing this article or reaching out to support@taponit.com. This piece of information will be included in the code.
The template below is what you will fill in, with the customizations being bolded. Read the Configuration section to learn about the settings that let you control the branding of your pop-up. If you want even more control of the branding, an API might be a good choice for you.
<script defer src="https://cdn.txttoi.com/widget/opt-in-widget.main.js"></script>
<link rel="stylesheet" href="https://cdn.txttoi.com/widget/opt-in-widget.main.css">
<script>
document.addEventListener('DOMContentLoaded', () => {
optInWidget.init({
// Configuration object (see below)
delay: 2000,
tenant: ' ',
prettyName: ' ',
headerBackgroundImage: ' ',
headerLogoImage: ' ',
headerText: ' ',
bodyDescription: ' ',
callToAction: ' ',
submittedDescription: ' ',
});
});
</script>
Configuration
delay
This controls how many milliseconds after your page loads before the pop-up displays. It is set to 2000 milliseconds (remember: 1 second is 1000 milliseconds!) but can be changed to whatever you desire. We don’t recommend setting this less than 2000 milliseconds.
tenant
This refers to the ‘Tenant Name’ that was provided to you by TapOnIt Support. If you do not have this, please read this article or reach out to support@taponit.com.
prettyName
This is how your company should be referenced in compliance language. We recommend setting this to your company’s legal name, or the name that you commonly do business as.
headerBackgroundImage
This is the image that appears in the top portion of your opt-in pop-up. It can be a full URL or a relative location on your computer. The recommended resolution 600p wide x 250p tall.
headerLogoimage
This is the image that appears in the middle of your header background image. It can be a full URL or a relative location on your computer. It can be any height, but the maximum width is 300p.
headerText
This text appears below the logo in the header background image. We recommend a short tagline or sentence.
bodyDescription
This text appears below the header, but above the form. It should instruct the visitor why you’re collecting information and what the outcome will be.
callToAction
This text appears below the form, but above the button. This text should inform your visitor of your opt-in process and tell them your short code or toll-free number so they will know to expect a message from that number. This text should inform your visitor what to expect as a response after they submit their phone number. These are examples of zip code, age gate and Y/YES responses:
- You will receive a text from ## asking you to reply with your ZIP code.
- You will receive a text from ## asking you to reply with your date of birth.
- You will receive a text from ## asking for Y or YES.
submittedDescription
This text appears after the user has submitted the form, thanking your visitor for subscribing and remind them what number they’re expecting a message from.
Coding Example
<script defer src="https://cdn.txttoi.com/widget/opt-in-widget.main.js"></script>
<link rel="stylesheet" href="https://cdn.txttoi.com/widget/opt-in-widget.main.css">
<script>
document.addEventListener('DOMContentLoaded', () => {
optInWidget.init({
// Configuration object (see below)
delay: 2000,
tenant: 'eat-at-joes',
prettyName: 'Joey's Catering',
headerBackgroundImage: 'eatatjoes.jpg',
headerLogoImage: 'joeslogo.png',
headerText: 'Sign Up for our Text Club!',
bodyDescription: 'Sign up for great offers, discounts, and specials.',
callToAction: 'You will receive a text from 12345 asking you to reply with your ZIP code.',
submittedDescription: 'Thanks, we can't wait to see you at Joe's',
});
});
</script>
Uploading to Your Website
Where this is uploaded to will differ based on where your website is hosted (WordPress, BigCommerce, etc.). We recommend reading through their documentation to gain a deeper understanding of where custom scripting should be placed.