Modals are perfect for promoting just about anything.
They will appear in a modal on top of your website.
Setting up a modal is quick and easy. In the CloudEngage admin, navigate to content > modals. Then click create modal in the top right corner.
First, choose the site and state you would like your modal to be in from the dropdowns in the top right corner of the page.
- Active: Ready for live viewing
- Inactive: Will not be displayed
- Archived: Saved for future use
Building your modals in the editor:
- The modal editor is split into two separate device editors. One for mobile (phones and tablets) and one for desktop (laptops and desktop computers).
- Choose a transparent, image, or color background.
Rows and Columns
- Add a row with the appropriate number of columns for your modal layout.
- Enable printing for coupons and vouchers
Adding Content To Rows/Columns:
Add more columns by clicking the blue '+' icon:
- You can resize columns by dragging the sides left / right.
Once you have added a row you can now insert content
To add an image to your modal, click on the image icon. You can either browse your computer for an image or you can add an image via an image URL.
To add a video, click on the video icon. You can add a video URL that is hosted from the following services: Youtube, Vimeo, Vine, Instagram, DailyMotion and Youku.
Text / Links
- To add text to your modal click the text icon and begin typing.
- To add a text link to your modal, highlight the text and click on the link icon.
- You can add links to URLs, phone numbers, or emails.
- You can add a forms that you have previously created.
- Just click on the form icon located to the left of the play button icon and select the form you wish to use from the dropdown.
Set up your Display Schedule
- You can set the start date to immediately, or you can choose scheduled and schedule a start date.
Tip: Be sure to choose and end date for your modal or else it will not save.
Set up your Display Frequency.
- Your display frequency determines how often and how many times a given user will experience your modal.
- There are three fields you can customize for your display frequency:
- Session: The time it will take (in minutes) for the alert to be seen again.
- Interval: The number of times a user reloads the page (sessions) for the modal to be seen again.
- Threshold: The lifetime number of times that a user will see the modal (per browser/device).
Set the Display Area and Target Device for your Modal
- Display Event: Choose to have your modal display on page load, or on exit intent (when a user is going to leave your site).
- Display Pages: Here you can set your modal to display on a specific page, every page, or just the home page.
- Target Device: Once you have content in each device the 'target device content' will change from a grey 'x' to a green check mark.
Now you are ready to set up your modal with Geo-Targeting.
- Geo-Targeting determines what geo-locational regions you want your modal to be seen from
- In your Geo-Targeting panel, you can toggle between using Geo-Fences and Geo-IPs in the righthand corner.
Geo-Fences are great for creating anything from pinpoint campaigns down to the size of a city block to a campaign you want half the nation to see.
- To get started, just click on the geo-fence toggle switch in the righthand corner.
- Next, click on the polygon icon the top of the map towards the middle.
- Now, click around on the map to draw your polygon Geo-Fence.
- You can edit or delete names in the right sidebar by clicking on them.
Tip: Click twice on your last marker to close the fence.
Geo-IPs are perfect for quickly isolating whole states with the click of the mouse.
- Toggle over to geo-ips in the top right corner.
- Click on a state in the map.
- Zoom in to select Zip Codes within states.
- Use the zip code dialog box to paste in many zip codes at once.
- If you wish, you can set up weather triggers for your modal. In this case, I am going to set my modal to fire when there is at least 2 inches of snow during the time of visit.
Remember to save your modal at the bottom of the screen when you are done. It will then populate in the Modals page under Content > Modals.