Popups are a powerful way to grab attention and engage users who visit your website on their mobile device.
Why You Should Create a Mobile Popup
- Design your popup to match the look and feel of your brand.
- Use your popup to provide discounts, promote a giveaway or contest, or invite subscribers to join your exclusive VIP club.
- Enable mobile two-touch which allows subscribers to opt-in with just a tap.
- Easily collect SMS and email subscribers.
- Add engaging background images or GIFs to catch the attention of your website visitors.
Design Your Mobile Popup
- Select Popups on the side menu of your Postscript dashboard.
- Locate your mobile popup on the right side of the page and select Edit.
Set Your Mobile Popup Basics
Your mobile popup basics serve as the foundation for your popup and the popup's behavior on your mobile website.
- Collection. You have the option to collect only phone numbers, or phone and email. For phone and email, you can choose which popup page displays first and second. We recommend you set the phone page to display first.
Two Touch. Changes the phone input field to a button. When subscribers tap the button, it launches their messaging app with an auto-generated message they must send in order to verify their phone number.
- Keyword. If you enable two-touch, you will need to pick a keyword to associate with the opt-in. You can create a new keyword or choose an existing one.
- Countries. Choose which countries should see the popup.
- Popup Size. You have two options for your popup type: Partial or Fullscreen.
- Popup Delay. Define how long a popup should wait before appearing. We recommend a 3-second delay. The longer the delay, the lower the conversion rate.
Close Action. Choose what happens when a customer exits your popup.
- Exit closes the popup entirely.
Bubble minimizes the popup to a small image in the bottom-left corner of the page. Visitors can access the popup later if they change their minds about subscribing.
- Close Action Text. Edit the text that appears on the minimized bubble popup.
- Include Pages. If you wish for the popup to display on specific sub-pages (aside from your main webpage), you can list those pages here. Separate multiple pages with a comma.
- Exclude Pages. If you want to ensure the popup doesn't display on specific pages, you can list those pages here. Separate multiple pages with a comma.
Choose Your Design Elements
Your design elements define the look and feel of your mobile popup.
- Logo Image. Upload a logo image by selecting a file from your device. You can also drag and drop the image file into the upload field.
Background Style. Choose to have your popup background be a solid color or an image.
- Background Color. If you select a solid color background, you can enter a specific hex code for your desired color.
- Background Image. If you select a background image, you can upload the image or GIF from your device or drag and drop the file into the upload field.
- Font. Select your preferred font. This font applies to all text on your mobile popup.
Style. Choose whether your mobile popup will have square or rounded corners.
- Corner Roundness. If you selected rounded corners, then use this field to set how round the corners should appear.
- Primary Text Color. Set your primary text color by entering a hex color code. This color applies to all text on your mobile popup except button text.
- Button Color. Set the color of your subscribe button by entering a hex color code.
- Button Text Color. Set the color of your subscribe button text by entering a hex color code.
- Headline Font Size. Set the size of your main headline text.
- Post-Heading Font Size. Set the size of your post-headline text, which appears below the headline.
Write Your Mobile Popup Copy
Your popup copy, or messaging, is key to your popup's success. You can use this space to offer a discount, promote a giveaway or contest, or advertise an exclusive VIP club.
You can get creative with your mobile message. You can also customize the wording of the signup button.
If you are also collecting emails with your popup, you'll see an identical section to the one above titled Email Collection Content. You can choose to keep the copy similar or change it up if there's a different incentive for email subscribers.
Create a Welcome Text Message
When a subscriber uses your popup to opt-in to SMS marketing, you can send them a custom welcome message.
Learn more about customizing your message--including how to use GIFs, emojis, and message tags--here.
Preview Your Mobile Popup Design
Postscript provides a dynamic popup preview on the right side of your design page. Your preview will update in real-time as you change the background, color, shape, and wording of your popup.
If you are also collecting emails with your popup, you can select Email below the preview to view how the email popup page displays. If you are using the Closed Action bubble that minimizes the popup when website visitors exit out of the popup, then you can view how that bubble displays by selecting Closed.
Enable Your Mobile Popup
Simply select the toggle besides Mobile / Mobile Popup so it is blue and reads Enabled to the right of the toggle.
Advanced Popup Design Customization
If you wish to further customize your mobile popup, you can do so using CSS code. We have created a few resources that will walk you through that process.
- Customize Your Mobile Popup with CSS. Learn how to customize various elements in your popup, including custom font, text size, and text color.
- Mobile Popup Template Gallery. Preview unique popup designs and copy the CSS code needed to transform your mobile popup.
- Popup CSS Customization Glossary. Learn more about the various elements and properties present in mobile popups.
Compliance Language Requirements
When collecting subscribers, the TCPA requires you to include necessary compliance language that informs visitors they are opting into SMS messaging from your store. At Postscript, we hard code compliance language into the popups you use.
Here's the TCPA-approved compliance language:
Need ongoing channel strategy guidance? Please fill out this form and we'll connect you to one of our certified partners.