Popups are a powerful way to grab attention and engage users who visit your website on either a desktop or mobile device. Postscript makes it easy to customize both desktop and mobile popups to match the look and voice of your brand. With Postscript popups, you can:
- Optimize your popup conversions by finding the best combination of popup creatives, timing, images, message copy, and incentives for your brand all through A/B testing.
- Level up mobile and desktop customizations with cascading style sheets (CSS).
- Further customize the look and targeting of your popups with side-images, banners, and exit-intent popups.
We designed this glossary as a reference to help you understand and locate the various HTML and CSS elements present in our popups.
Common CSS Properties
CSS properties allow you to define how specific elements should display on your website, or in this case, your popup.
Some of the properties listed below appear in the above example of code, highlighted in gold.
| ID | Function |
color |
Sets the color of your text |
background-color |
Specifies the background color of an element |
background-image |
Specifies one or more background images for an element |
font-size |
Specifies the font size of your text |
font-family |
Specifies the font family for your text |
font-weight |
Specifies the weight of your font |
padding |
Shorthand property for all the padding properties |
margin |
Sets all the margin properties in one declaration |
width |
Sets the width of an element |
height |
Sets the height of an element |
border |
Shorthand property for border-width, border-style and border-color |
position |
Specifies the type of positioning method used for an element |
Common HTML Elements in Popups
HTML elements help inform which parts of a webpage, or in this case your popup, the CSS code should impact.
For example, if I wanted to change the color of my text but have it only affect my h3 header and not other headers and smaller text, I would use the following code:
h3 {
color: purple;
}| Element | Function |
|---|---|
body |
Refers to the body of HTML document |
h1 |
Heading 1 |
h2 |
Heading 2 |
h3 |
Heading 3 |
h4 |
Heading 4 |
p |
Paragraph |
button |
Defines a clickable element |
div |
A division or a section in an HTML document |
span |
An in-line element used to mark up a part of a text, or a part of a document |
| Element | Desktop Popup |
|---|---|
h4 |
|
p |
|
button |
|
div |
|
| Element | Mobile Popup |
|---|---|
h2 |
|
h3 |
|
span |
|
div |
|
Desktop Popup ID Elements
We've included a list of common desktop popup elements that you can customize using CSS. Use the image to locate an element you wish to customize, then locate the corresponding ID in the table below.
| Image Item | ID |
| 1 | #ps-desktop-widget__logo-image |
| 2 | #ps-desktop-widget__pre-headline |
| 3 | #ps-desktop-widget__headline |
| 4 | #ps-desktop-widget__post-headline |
| 5 | #ps-desktop-widget__disclaimer-text |
| 6 | #ps-desktop-widget__phone-input |
| 7 | #ps-desktop-widget__email-input |
| 8 | #ps-desktop-widget__submit |
| 9 | #ps-desktop-widget__close-link |
| Image Item | ID |
| 1 | #ps-desktop-widget__closed-body |
| 2 | #ps-desktop-widget__close-text |
Mobile Popup ID Elements
We've included a list of common mobile popup elements that you can customize using CSS. Use the images to locate an element you wish to customize, then locate the corresponding ID in the tables below.
| Image Item | ID |
| 1 | #ps-mobile-widget-partial__logo-image |
| 2 | #ps-mobile-widget-partial__headline |
| 3 | #ps-mobile-widget-partial__sub-headline |
| 4 | #ps-mobile-widget-partial__terms |
| 5 | #ps-mobile-widget-partial__phone-input-wrapper |
| 6 | #ps-mobile-widget__email-input |
| 7 | #ps-mobile-widget-partial__accept-button |
| 8 | #ps-mobile-widget-partial__accept-button-text |
| Image Item | ID |
| 1 | #ps-mobile-widget-overlay__logo-image |
| 2 | #ps-mobile-widget-overlay__pre-headline |
| 3 | #ps-mobile-widget-overlay__headline |
| 4 | #ps-mobile-widget-overlay__post-headline |
| 5 | #ps-mobile-widget-overlay__terms |
| 6 | #ps-mobile-widget-overlay__phone-input-wrapper |
| 7 | #ps-mobile-widget__email-input |
| 8 | #ps-mobile-widget-overlay__accept-button |
| 9 | #ps-mobile-widget-overlay__accept-button-text |
| 10 | #ps-mobile-widget-overlay__reject-button |
| Image Item | ID |
| 1 |
#ps-mobile-widget-close__body(note: two underscores between close and body)
|
| 2 |
#ps-mobile-widget-close__text(note: two underscores between close and text)
|
Additional Resources
- Just getting started with designing your mobile and desktop popups? Check out this mobile tutorial or this desktop tutorial for how to customize your popup font, text size, text color, and more.
- Did you know you can customize your mobile and desktop Back in Stock (BIS) popups with CSS? Learn how to add CSS to your mobile BIS popup with this article or how to add CSS to your desktop BIS popup with this article.
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.