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

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.

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.

CTA Behavior

You have 3 options for the behavior of the CTA button:

  1. Standard button (Default): This will direct your users to the landing page.
  2. Print: Ideal for if you want your users to print and redeem your offer at a specific location.
  3. Advanced: Ideal if you want to create a custom behavior and are code savvy. Refer to this article for more information.

Don't forget to include parameters if you're looking to learn more about each click to your site. Read more here

10. Background

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:

  1. Link to URL: Allows you to link to an existing URL, just copy and paste the link. (Allows you to define the link color)
  2. 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)
  3. Do not display terms: If you don't choose to include any Terms and Conditions, select this option.

Now that you have your Zembula experience design specifications, you can build your own experience page, or use this article for sample creative assets and give it a try! 


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! 

Click here for the templates

Did this answer your question?