A banner is a wide bar for your own web pages: a headline on the left, a button on the right. Visitors click the button and choose their calendar app. It takes little room, so it fits above an article, in a footer or across a landing page.
Before you start
Growth tools belong to Events. If Events is off in your workspace, switch it on under Settings > Features.
Your role needs Create Events to add a banner and Update Events to open and change it. Deleting one needs Delete Events. Roles are set under Settings > Team & Roles.
You also need at least one calendar or event to attach.
Creating the banner
Open Events > Growth Tools, click New Growth Tool and pick Banner in Choose Growth Tool Type. It sits on the Website Embeddable tab. The editor opens right away.
A new banner starts as Deactivated. Switch the status in the header to Active once it is ready. The status is stored immediately, the name in the header as soon as you leave the field. Everything else waits for Save.
The sidebar has four tabs: Setup, Form, Appearance and Share.
Setup: what the button does
Method decides what visitors get:
- Subscribe to Calendar works with one or more of your calendars.
- Add event puts a single event into their calendar.
Attach calendars with Add Calendar or events with Add Event. Calendars and events you add or remove are stored at once. After you add one, the editor asks whether to replace the title and description with its details. Choose Yes or No.
When you switch the method and the button still reads "Subscribe" or "Add Event", the button text changes along with it.
With two or more calendars, User can deselect calendars appears. If you also collect contact information, visitors can then untick the calendars they do not want next to the form.
A banner without a calendar (or without an event, for Add event) cannot be saved. The Setup tab turns red and shows "Please add a calendar." or "Please add an event." Until something is attached, the other tabs do not open: clicking Form, Appearance or Share keeps you on Setup and shows the same message.
Form: asking for contact details
Collect Contact Information is off for a new banner. Then the button opens the list of calendar apps straight away. Switch it on and visitors fill in a short form first.
A new banner already has two questions, "Full Name" and "Email address". Use Add Field for more. Each question has a Question text and a Reply Type. Name and Email can only be used once and fill the person's name and email address. For Text, Number, Date, Date & Time and Yes / No, choose where the answer goes under Save response to Custom Field. The list only offers custom fields of the same type.
Turn on Required to make a question mandatory, and write your own Required error message if the default "This field is required." does not fit.
The editor will not save while a question has no text or no custom field.
A new email address creates a new account from the name and email. An address that already has an account gets a confirmation email, and the calendars are added only after the person clicks the link in it. An answer is written into a custom field only if the person has no value there yet, so existing data is never overwritten.
Appearance: three states
Appearance switches between three states, and the preview follows along:
- Initial State is the banner itself. Click the headline in the preview to change its text. Set Layout Colors, Button Colors, Button Size and Button Text.
- Form State appears only while you collect contact information. It styles the window with the form: its colors, Form Input Colors, and the Calendar Selector, which lists the calendar apps with names (Button) or as icons only (Icons).
- Submitted State is what visitors see after picking a calendar app. Keep After submit on Show new message, edit the headline in the preview and style the button that opens the calendar.
Show description adds a description under the headline, for the initial and the submitted state separately. Click it in the preview to edit the text. A new banner starts without a description.
Visitors can choose Apple, Google, Office 365, Outlook, Outlook.com or Yahoo. With Add event, Google, Office 365, Outlook.com and Yahoo open with the event already filled in.
The banner has no setting for the button position. The button stays on the right, and on screens narrower than 640 pixels the banner stacks and centers it.
Share: putting it on your page
Open Share and copy the code under Or embed as an inline widget. It renders the banner directly in your page, without an iframe. Paste both lines where the banner should appear.
While the banner is Deactivated, the inline widget shows nothing on your page.
If you want a centered card instead of a wide bar, use a box.