How can I update the layout of the Zapier Events App?

Customize the presentation of your Zapier Events App to match your corporate branding.

The general process of customizing the appearance of a Zapier Events app is below:

1. Build an HTML template.
2. Upload the template to the RocketScreens CMS.
3. Set the template on the selected App.

Building an HTML Template

The Zapier Events App is rendered through HTML, so any custom layout requires a new HTML template. The template can be as simple or as complex as you desire, but it has a few restrictions:

• You MUST add the specified RocketScreens classes (detailed below).
• You MUST NOT include any html, head, or body tags. RocketScreens already provides these tags for the template.
• In order for the content to self-organize correctly on a variety of screen dimensions, VW and VH CSS sizing should be used. This is so positions are respected across screen dimensions of all sizes.

Required Classes

The below classes are required to be added to the HTML template:

default-zapier-event-title

This is the class used for the title element. RocketScreens will look for this element to set the title content.

default-zapier-event-message

This is the class used for the message element. RocketScreens will look for this element to set the message content.

default-zapier-event-subtitle

This is the class used for the subtitle element. RocketScreens will look for this element to set the subtitle content.

Template Example

The below code block is an example HTML template for the Zapier Events app:

<div class='zapier-event'>
    <div class='custom-logo'><img src='https://www.rocketscreens.com/logo.png'/></div>
    <div class='custom-title default-zapier-event-title'></div>
    <div class='custom-message default-zapier-event-message'></div>
    <div class='custom-subtitle default-zapier-event-subtitle'></div>
</div>
<style>
.custom-logo {
    width: 10vw;
    height: 10vw;
    position: fixed;
    left: 5vw;
    top: 5vw;
}
.custom-title {
    width: 100%;
    position: fixed;
    top: 5vw;
    font-size: 3vw;
    text-align: center;
}
.custom-message {
    width: 50vw;
    left: 25vw;
    position: fixed;
    top: 10vw;
    font-size: 2vw;
    text-align: center;  
}
.custom-subtitle {
    width: 50vw;
    left: 25vw;
    position: fixed;
    bottom: 5vw;
    font-size: 2vw;
    text-align: center; 
}
</style>

The HTML contains some simple div elements which specify the required classes, but also include some custom classes. The custom classes are referenced in the style tag to customize the layout with CSS.

Uploading the HTML to RocketScreens

Sending the HTML file to RocketScreens CMS is simple. Go to the Content page, and upload the HTML file. Then go to your App and select the uploaded HTML file.

The new style will only apply when a new event is received.