Our Zembula experience pages are easy to customize and integrate into your preferred marketing channel. Let's walk thru the various components that make up a Zembula experience, and the various design requirements and suggestions for each.
Your Zembula Experience Page
1 & 2. Logo and Header Bar (Only for use with interstitial page)
Your company logo is optional, along with the overall page header. The logo has a max file size of 1MB, and should either be a PNG or JPG file. We also recommend for your logo to have a transparent background.
For the header, any HEX color is supported, and you can easily adjust the transparency.
Note: The Logo/Header Bar is only required if you are linking to an Interstitial page. If you are planning on embedding your Experience on your website, set the Header Bar to "off". For more information on embedding your Experiences, click here.
3-6. Experience Components
Your experience has 3 major components: Cover image, Reveal image, and Border. The cover image is the top image your customer will interact with, and reveal the bottom image, aka Reveal Image. Both the cover and reveal image must be 900x900 px square. You can also customize the border to reflect your brand colors using HEX color codes. The border transparency can be adjusted by setting your desired percentage; setting transparency to 0% hides the border.
For each Zembula experience, you can adjust the interaction hint and how it displays for your customers.
- For the Scratch-It experience, you can customize the circle background color, transparency, size and overall position.
- For the Peel-It experience, you can customize the location of the peeling corner.
- For the Slide-It, Pull-It, or Push-It experience, you can customize the slide background color, transparency, and direction: top, bottom, left or right.
- For the Zip-It, you can customize the starting direction, placement, color and transparency of the zipper elements.
- For the Tear-It, you can adjust the tear outline color, the number of sections, and the spacing between the tear elements and the edge of the Experience itself.
- For the Spin-It, you can adjust the tile edge color, the number of tiles per side, and the spinning direction.
- For the TileSlide-It, you can adjust the tile edge color, the number of tiles per side, the difficulty of the puzzle, and the effect that reveals the reveal image after the puzzle has been solved.
- For the Smash-It, you can customize the arrow and dot colors of the target, the circle color, the size and horizontal/vertical positions.
To set the transparency, go to the Experience Hint area, and click on Color. Transparency is set by sliding the ruler as shown below by the red arrow:
7. Redeem Code
The Redeem Code is optional, and can be customized by adjusting the HEX color and font type.
8. Email Acquisition
You have the option to use your Zembula Experience to collect email addresses. You have the capability of changing the text color and font.
9. Call to Action
Each experience ends with a Call to Action (CTA), and this field is required in order for you to launch and make this page live. For the CTA, you can customize the HEX color for the button and text. You can also specify font type, and overall border radius.
Don't forget to include your URL! This URL should point to your landing page, so make sure to write up a great CTA.
You have 3 options for the behavior of the CTA button:
- Standard button (Default): This will direct your users to the landing page.
- Redeem code: Ideal for if you want your users to receive a redeem code to use for a product or promotion.
- Acquisition: Use this to collect emails into your CRM or ESP list from your website. More about email acquisition can be found here.
Don't forget to include parameters if you're looking to learn more about each click to your site. Read more here.
10. Background (only for interstitial)
The experience page background for your can also be styled by either uploading an image or setting a HEX color. If you're uploading an image, the file must be a min. width of 1400px and min. height of 900px. The file should either be a PNG or JPG to allow for faster loading.
Note: The background is only required if you are linking to an Interstitial page. If you are planning on embedding your Experience on your website, you do not need to style your background. For more information on embedding your Experiences, click here.
11. Terms and Conditions
Our platform provides three options for your company's Terms & Conditions:
- Link to URL: Allows you to link to an existing URL, just copy and paste the link. (Allows you to define the link color)
- Click to Open Modal Window: Allows you to host your terms and conditions on our platform. The customer will see a modal window pop-up once they click on your terms link. This modal window option allows you to stylize your text using simple Markdown. (Allows you to define the link color)
- Do not display terms: If you don't choose to include any Terms and Conditions, select this option.
CLICK THE IMAGE BELOW TO DOWNLOAD THE DESIGN TEMPLATE:
Experience, Website and Email Mockup Templates
We've created these handy templates for you to download to help you design your experiences and see how they'll look placed on your website or in your email!