This guide will walk through design options available for non-quiz pop-ups. These options can be accessed through the pop-up editor.
💡 What you'll learn
Understanding quiz vs. opt-in pop-ups (jump to section)
What is an initial vs. submitted state? (jump to section)
Fonts & images (jump to section)
Frequently asked questions (jump to section)
Understanding quiz vs. opt-in pop-ups
In Octane AI, you can make 2 types of pop-ups:
Quiz pop-up: used to display an Octane AI quiz.
Opt-in pop-up: used to collect opt-ins only, or display a button with a custom link.
This guide will be used to explain how to find design options for opt-in pop-ups, which can be located in the pop-ups editor.
The pop-ups editor can be accessed from the Pop-ups page.
What is an initial vs. submitted state?
Opt-in pop-ups have 2 states, or screens that you can edit.
Initial state: what the pop-up looks like when it first appears.
Submitted state: what the pop-up looks like after an opt-in has been submitted, or a custom link button has been pressed.
Options to edit each state can be found under the Design tab inside of the pop-ups editor.
NOTE: discount codes can be added in the submitted state section.
💡 Inherit font family from destination site
Enable this option to apply your website's fonts to a pop-up. Custom fonts won't be visible inside of the pop-ups editor, but will be visible once the pop-up triggers on your website.
Fonts are pulled automatically from your website's styling, but if the fonts are being applied incorrectly or are not displaying, let our support team know through [email protected].
Fonts & images
Pop-ups can display a side image and a background image. Side images can also be disabled in the LAYOUT section when editing the initial or submitted state.
For specific image sizing recommendations, check out this guide.
Content & colors for pop-up text as well as buttons can also be edited inside of the "Initial state" or "Submitted state" sections.
💡 Formatting pop-ups for desktop & mobile separately
Image sizing and displays will be different for desktop and mobile screens. To make sure your pop-up is able to accommodate both, we recommend creating separate pop-ups for desktop and mobile devices.
You can find more details on how to target different devices with pop-ups in this guide.
These settings are available for both quiz & opt-in pop-ups.
Frequently asked questions
Can I add different images for mobile & desktop devices in the same pop-up?
Currently, separate pop-ups must be created to display different content for desktop and mobile users.
How do I change the font size of my pop-up text?
The size of pop-up fonts can't be edited directly in the editor, but can be edited with CSS styling on your website.
If you aren't certain how to do this and would like font sizes adjusted, reach out to our support team at [email protected].
How do I preview my pop-up?
To preview your pop-up in action, it will need to be set live on your website.
We recommend setting the pop-up live on a page with low traffic, such as your website's terms & conditions or privacy policy page through the pop-up's targeting settings.
Is A/B testing available?
A/B testing is available on Octane Plus for opt-in pop-ups.
Quiz pop-ups can't be A/B tested directly, but you can use opt-in pop-ups to A/B test quizzes published in a webpage. This guide will have more detailed instructions on how to set this up.