A box is a compact card you place inside the content of a page: a headline, a short description and a button. The description gives you room to say why someone should sign up. Visitors click the button and choose their calendar app.
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 box and Update Events to open and change it. Deleting one needs Delete Events. Roles are set under Settings > Team & Roles.
Creating the box
Open Events > Growth Tools, click New Growth Tool and pick Box on the Website Embeddable tab of Choose Growth Tool Type. The editor opens right away with four tabs: Setup, Form, Appearance and Share.
The new box starts as Deactivated. Switch the status in the header to Active when it is ready. The status is stored immediately. Texts, colors, the method and question settings wait for Save.
Setup
Under Method, choose Subscribe to Calendar to work with one or more of your calendars, or Add event to put a single event into a visitor's calendar. Then attach calendars with Add Calendar or events with Add Event.
After you attach a calendar or an event, the editor asks whether to replace the headline and description of the box with its name and description. Yes saves you typing when the calendar description already says what you want.
You cannot save a box that has nothing attached. The 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.
With two or more calendars, User can deselect calendars appears. If you also collect contact information, visitors can untick calendars they do not want next to the form.
Form
With Collect Contact Information off, which is how a new box starts, the button opens the list of calendar apps directly. Switch it on and visitors fill in a short form first. The box comes with the questions "Full Name" and "Email address". Use Add Field for more, and pick a custom field under Save response to Custom Field for every question that is not a name or an email.
Answers only go into a custom field that is still empty for that person.
Appearance
Appearance has an Initial State, a Submitted State and, while you collect contact information, a Form State in between. The preview shows the state you pick.
In the Initial State you shape the box itself:
- Click the headline or the description in the preview to edit the text.
- Show description hides or shows the description line.
- Layout Colors sets the background, headline and description colors.
- Button Colors, Button Position, Button Size and Button Text style the button. Button Position places it left, centered or right.
The Form State styles the window that opens 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).
The Submitted State is the message visitors see after they pick their calendar app. Leave After submit on Show new message, edit headline and description in the preview, and set Show description, Button Colors, Button Position and Button Text. The button opens the calendar in a new tab.
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.
How the box looks on your page
The box is a card up to 480 pixels wide with centered text. A new box places its button in the center; change that with Button Position. If you need something that spans the full width of the page, use a banner. If you only want a button, use the button growth tool.
Share
Open Share and copy the code under Or embed as an inline widget. It renders the box directly in your page, without an iframe. Paste both lines where the box should appear.
Keep the box Deactivated while you build it. The inline widget then shows nothing on your page.