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 elements on mobile devices. You can also hide the entire element from phones (or desktop devices), or create two variant of your campaign (one for each device) if you want to make more significant changes.
Working with one variant
By customizing each element 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 anyway. 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 element you want to customize to phones. You will find a desktop/mobile icon on some of the settings, such as font size, margins and width/height.
- Toggle the mobile icon to activate mobile-only editing. Edit the setting so that the element looks good in the mobile view, eg. decreasing the font size or increasing the size of the close button. Now that the mobile toggle is on, the changes will only be saved to mobile devices.
- If you want to hide the entire element on phones (or desktops), simply check the "Hide on Mobile" option in the settings. This is useful for when you want to minimize the number of elements for smaller screens, eg. hiding the image for mobiles.
- If you should change your mind about the mobile adjustments, simply click the desktop icon again and it will pop back to its original settings.
- 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 at Intsgaram 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 elements in regard to sizes, placements, and existence.
- 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.