Triggerbee makes it possible to customize the mobile experience down to the pixels. With a few clicks, you can quickly adjust sizes and placements for your campaign components on mobile devices. You can also hide the entire components from phones (or desktop devices), or create two variants of your campaign (one for each device) if you want to make more significant changes.
Working with one variant
By customizing each component to phones, your campaign will be responsive, making it possible to display the same campaign on all devices. This is useful if you wish to keep the number of campaigns down and not have to worry about device targeting. However, if you wish to have separate statistics for your devices, we recommend that you work with two variants. Please scroll down if so :)
Start by designing your campaign just like you would normally do in the desktop view. Once you are happy with your design, toggle to the mobile view.
Click on the component you want to customize for phones. You will find a desktop/mobile icon on some of the settings, such as font size, margins, and width/height.
Now that the mobile toggle is on, the changes will only be saved to mobile devices. Edit the setting so that the component looks good in the mobile view, eg, decreasing the font size or increasing the size of the close button.
If you would change your mind about the mobile adjustments, simply click the desktop icon again, and it will pop back to its original settings.
If you want to hide the entire component on phones (or desktops), simply check the "Hide on Mobile" option in the component settings or in the left layout menu. This is useful for when you want to minimize the number of components for smaller screens, eg, hiding the image for mobiles.
Now your campaign is ready to go live with pixel-perfect settings for both desktop and mobile devices!
Working with two variants
By working with two variants in your campaign, one for desktop and one for mobile, you can follow up on statistics divided per device and/or make more significant changes to your campaign. For instance, maybe you want to ask the visitor to follow your company on Instagram only for visitors coming from mobile devices, while only asking for newsletter signup on desktops. This is when variants come in handy.
Start by designing your campaign just like you would normally do in the desktop view. Once you are happy with your design, go to campaign settings.
Add the "Only desktop" Session condition.
Now, add a new variant. This will create a copy of your first variant. Add the "Only mobile" session condition for this variant.
Open the editor for your mobile variant and make any adjustments to your components regarding sizes, placements, and existence. Because you have the mobile-only session condition, anything you do here - will only apply to mobile devices.
Once you are finished with your desktop and mobile designs and have added your campaign settings, each of the variants will only display for their intended devices.