2. Designing Your Exit Overlay

There are two options for designing your Rooster Exit Overlay:

1. Design your own exit overlay in HTML and CSS.

2. Use a Rooster Template.

Please choose whichever option you're most comfortable with. If you are not adept with HTML, we recommend option #2.

Designing Your Exit Overlay with HTML

  1. First, please review our HTML best practices document.

  2. If developing the HTML yourself, set a couple of new styles you can use in style.css. Set your body width and height to 800x500 pixels, set the colour on your body, and set your overflow to 'Hidden.'

  3. If using an HTML template, adjust the template so it uses your messaging and graphics.

  4. After completing your HTML code, copy it to text file and save it somewhere convenient.

  5. Log in to your Rooster Account, and follow the steps in Loading Your Exit Overlay

Using a Rooster Template

  1. Log in to your Rooster Account.

  2. Click "New Exit Overlay" (green button).

  3. Browse the available templates (click for a larger preview).

  4. Once you've made your choice, click your template of choice, name it, and select "Create My Overlay."

  5. Your new exit overlay will populate. To make adjustments, click the "Edit" button above your exit overlay on the righthand side. Rooster's Inline Editor will then launch, allowing you to adjust your copy and colour scheme.

  6. To skip the Rooster Inline Editor and make adjustments to your HTML instead, click "Go back to the old Rooster editor" and then click "Edit." If you need help, please review our HTML best practices document

  7. Click “Save Changes” and exit the editor.

If you have any questions, please contact us at support@getrooster.com

Have more questions? Submit a request


Powered by Zendesk