Popups are a powerful way to grab attention and engage users who visit your website on their mobile device.
Why a Postscript Mobile Popup Benefits You
- Easily (and compliantly) collect SMS and email subscribers.
- 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.
- Add engaging background images or GIFs to catch the attention of your website visitors.
Create a Mobile Popup
Postscript allows you to create and maintain multiple mobile popups, though only one mobile popup can be enabled at any given time.
- Select Acquisition in the side menu of your Postscript dashboard, then select Popups.
- Select Create Popup in the top-right corner of the page, then select Mobile from the drop-down options.
Design Your Popup
Postscript makes it easy to customize your mobile popup, from the behavior, design, and content. Check out the tabs below for more information.
Your mobile popup basics serve as the foundation for your popup and the popup's behavior on your mobile website.
- Name. Choose a name that speaks to the offer in your popup. This name displays in the list of available popups on your main Popups page.
- 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 three options for your popup type: Partial, Fullscreen, or Banner.
- 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 select those pages from the drop-down.
- Exclude Pages. If you want to ensure the popup doesn't display on specific pages, you can select those pages from the drop-down.
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.
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.
When a subscriber uses your popup to opt-in to SMS marketing, you can send them a custom confirmation message.
If you are offering a sign-up incentive that differs from the default 10% off, you can select the purple More drop-down and select Add Coupon to change the offer. Learn more about Postscript coupons here.
If you are creating a Two Touch popup with a "tap to subscribe" experience, then your confirmation message will include a keyword. The keyword reply for this keyword should include the coupon or offer you promote in the popup.
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
Once you have designed your mobile popup, it's time to enable it. You can do so from the main popup page or from the specific popup page.
Simply select the toggle besides Mobile Popup so it is green 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.
Get Support
Have questions? Please feel free to reach out to our wonderful Support team at support@postscript.io or via live chat. You can also submit a support request here!
Need ongoing channel strategy guidance? Please fill out this form and we'll connect you to one of our certified partners.
