---
title: How do I set up the TapOnIt opt-in widget?
description: An opt-in widget is a great way to gain new subscribers by placing a pop-up on your website.
---

[Skip to content](https://help.taponit.com/how-do-i-set-up-the-taponit-opt-in-widget#main-content)

English

Show submenu for translations

[Can't find what you need?](https://help.taponit.com/kb-tickets/new?hsLang=en)

![TOI\_New\_Logo\_Horizontal (1)](https://help.taponit.com/hs-fs/hubfs/TOI_New_Logo_Horizontal%20(1).png?width=200&height=48&name=TOI_New_Logo_Horizontal%20(1).png)

Open main navigation

Close main navigation

- English
  
  Show submenu for translations
- [Can't find what you need?](https://help.taponit.com/kb-tickets/new)
- [Client Resources](https://taponit.com/client-resources)

[Client Resources](https://taponit.com/client-resources)

 Hi! How can we help you?

- There are no suggestions because the search field is empty.

1. [Knowledge Base](https://help.taponit.com/?hsLang=en)
2. [Features](https://help.taponit.com/features?hsLang=en)
3. [Opt-In Widget](https://help.taponit.com/features?hsLang=en#opt-in-widget)

August 10, 2023

# How do I set up the TapOnIt opt-in widget?

## 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](https://help.taponit.com/how-do-i-set-up-the-taponit-opt-in-widget#getting-started)

[Configuration](https://help.taponit.com/how-do-i-set-up-the-taponit-opt-in-widget#configuration)

[Uploading to Your Website](https://help.taponit.com/how-do-i-set-up-the-taponit-opt-in-widget#uploading)

### **Getting Started**

Before you upload your code to your website, you will need to locate your tenant name by referencing [this article](https://help.taponit.com/where-do-i-get-my-tenant-name?hsLang=en) or reaching out to [support@taponit.com](mailto: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](https://help.taponit.com/where-do-i-get-my-tenant-name?hsLang=en) or reach out to [support@taponit.com](mailto: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.

- [General](https://help.taponit.com/general?hsLang=en#main-content)

    - [Plans](https://help.taponit.com/general?hsLang=en#plans)
    - [Education](https://help.taponit.com/general?hsLang=en#education)
    - [Compliance](https://help.taponit.com/general?hsLang=en#compliance)
- [Features](https://help.taponit.com/features?hsLang=en#main-content)

    - [API](https://help.taponit.com/features?hsLang=en#api)
    - [Campaigns](https://help.taponit.com/features?hsLang=en#campaigns)
    - [Contact Card](https://help.taponit.com/features?hsLang=en#contact-card)
    - [Content](https://help.taponit.com/features?hsLang=en#content)
    - [Content Hub](https://help.taponit.com/features?hsLang=en#content-hub)
    - [Coupons](https://help.taponit.com/features?hsLang=en#coupons)
    - [Growth Tools](https://help.taponit.com/features?hsLang=en#growth-tools)
    - [Flows & Keywords](https://help.taponit.com/features?hsLang=en#flows-keywords)
    - [Media](https://help.taponit.com/features?hsLang=en#media)
    - [Opt-In Widget](https://help.taponit.com/features?hsLang=en#opt-in-widget)
    - [Targeting](https://help.taponit.com/features?hsLang=en#targeting)
- [Analytics](https://help.taponit.com/analytics?hsLang=en#main-content)

    - [Subscribers](https://help.taponit.com/analytics?hsLang=en#subscribers)
    - [Metrics](https://help.taponit.com/analytics?hsLang=en#metrics)
- [Settings](https://help.taponit.com/settings?hsLang=en#main-content)

    - [Set-Up](https://help.taponit.com/settings?hsLang=en#set-up)
    - [Tenant Name](https://help.taponit.com/settings?hsLang=en#tenant-name)
    - [Users](https://help.taponit.com/settings?hsLang=en#users)
    - [Billing](https://help.taponit.com/settings?hsLang=en#billing)
    - [Account](https://help.taponit.com/settings?hsLang=en#account)
- [Integrations](https://help.taponit.com/integrations?hsLang=en#main-content)

    - [Shopify](https://help.taponit.com/integrations?hsLang=en#shopify)
    - [Punchh](https://help.taponit.com/integrations?hsLang=en#punchh)
- [TapOnIt Releases](https://help.taponit.com/taponit-releases?hsLang=en#main-content)

    - [February 2024](https://help.taponit.com/taponit-releases?hsLang=en#february-2024)
    - [May 2024](https://help.taponit.com/taponit-releases?hsLang=en#may-2024)
    - [April 2024](https://help.taponit.com/taponit-releases?hsLang=en#april-2024)
    - [June 2024](https://help.taponit.com/taponit-releases?hsLang=en#june-2024)
    - [September 2024](https://help.taponit.com/taponit-releases?hsLang=en#september-2024)
    - [October 2024](https://help.taponit.com/taponit-releases?hsLang=en#october-2024)
    - [December 2024](https://help.taponit.com/taponit-releases?hsLang=en#december-2024)
    - [January 2025](https://help.taponit.com/taponit-releases?hsLang=en#january-2025)
    - [April 2025](https://help.taponit.com/taponit-releases?hsLang=en#april-2025)
    - [May 2025](https://help.taponit.com/taponit-releases?hsLang=en#may-2025)
    - [July 1, 2025](https://help.taponit.com/taponit-releases?hsLang=en#july-1-2025)
    - [September 2025](https://help.taponit.com/taponit-releases?hsLang=en#september-2025)
    - [October 2025](https://help.taponit.com/taponit-releases?hsLang=en#october-2025)
    - [January 2026](https://help.taponit.com/taponit-releases?hsLang=en#january-2026)
    - [May 2026](https://help.taponit.com/taponit-releases?hsLang=en#may-2026)
    - [August 2026](https://help.taponit.com/taponit-releases?hsLang=en#august-2026)

[![Chill listening crop-3](https://help.taponit.com/hs-fs/hubfs/TOI_New_Logo_Horizontal%20(1).png?width=99&height=24&name=TOI_New_Logo_Horizontal%20(1).png "Chill listening crop-3")](https://www.taponit.com?hsLang=en)

TapOnIt Help Center

<https://www.facebook.com/taponittech> <https://www.instagram.com/taponit/> <https://www.linkedin.com/company/taponit-llc/mycompany/verification/> <https://www.youtube.com/channel/UCp7uyfNPmTnNIAOJ5VQaeVg>

Copyright © 2026, TapOnIt