Last Updated 9/6/18.
Invite campaigns are now available to target your Event Partners (like Speakers, Sponsors, or Exhibitors) to encourage them to invite their contacts or prospects to your event. Part of the Invite Suite of Tools are Page templates. Below we'll review how to build and edit a template that you can include in your Invite Campaign.
You can find all Template types (Email, Banner, and Page) under the Templates section in the left side panel of the app.
- Click into the 'Templates' section in the left side panel.
- Create a New Template first by making a copy of an existing template.
- Once you've made your new Page Template, click the 'Design' button to edit it.
Design Your Page Template
1. Scroll down to see the page body. To the right are the drag and drop options to design your page - Content, Rows, and Settings.
2. Select 'Toggle Screen Mode' to view the Template Builder in full screen view.
Settings: Edit the Body
By starting with the body, you can choose the main design aspects of your page, and then work backwards to edit the smaller details of your page.
Click the 'Settings' tab to the right of the editing section.
- Content Area Width: This is used when the device has a screen larger than that width. You can think of it as a "max" width for that content area. On small devices, it will be ignored. This defaults to 500px, but you can drag the circle along the line to increase or decrease the content width.
- Background Color: Select the background color of your page. You can type in a Hex code, or click on the color box to the left of the Hex code to select your color.
- Content Area Background Color: Select the background color for the content area. This defaults to transparent, or you can choose a color or type in a Hex code.
- Default Font: Choose your default font from the font drop down. This will apply to all content elements in the message. Please see this article for more information on fonts.
- Link Color: This defaults to the standard blue. Again, you can type in a Hex code, or click on the color box to the left of the Hex code to select your color.
Note: When you're done editing, be sure to click 'Save' above the settings editor. You'll want to do this often throughout the editing process!
Rows: Edit the Structure
If you've started with an existing template, there should already be some sort of structure and content boxes in the page editor. However, you can add more or different row layouts in this next section.
- Select the 'Rows' tab in the middle of the editing section.
- Here you will see column layouts for your email. Drag and drop your chosen layout into the editor to the left.
- Make sure you're placing your selected row in an area that changes into a blue line and says 'Drag it Here', as seen below.
4. If you want to delete a row, click on the panel and select the red trashcan to delete.
5. To duplicate the row, click on the stacked squares, and an identical structure will appear below the original.
6. Click on a row section to edit the row properties to the right.
- Row Background Color: Edit the row background color using the color picker or a Hex code, or keeping it as transparent.
- Content Background Color: Edit the content background color using the color picker or a Hex code, or keeping it as transparent.
- Do not stack on mobile: Select whether you want the rows to stack when viewed on a mobile device.
- Row Background Image: If you want to add a background image for the row instead of using a color, insert the image URL here.
7. Scroll down the editor on the right to edit the column properties next.
- Column Background: Select the column background by using the color picker or a Hex code, or keeping it as transparent.
- Padding: Add or remove padding for the column. Click More Options to edit each side of the column individually.
- Border: Add or remove a border width and select the color of the border using the color picker or a Hex code, or leave the border transparent. Click More Options to edit each border of the column individually.
Once you've edited or added any new structures, click 'Save'.
Content: Edit the Page Content
Now it's time to really get designing! Now you can drag and drop any of the content blocks into existing structures. Below are all the different options you can edit.
Drag and drop the text box inside any structure to start writing.
The text editor is pretty self-explanatory. You can change the font family, size, color, and more. What's new here are the Special Links and Merge Tags.
- Special Links include the Event link, Event Registration Link, Partner Website, and Partner Dashboard Link. Selecting one of these will automatically populate with the corresponding link.
- Merge tags are those handy keywords that are typically found in Invite Pages. They include event information and partner information. The selected Merge Tag(s) will populate with the corresponding information, as long as it was uploaded in a Partner Import.
Lastly, you can edit your content box when you select it from inside the structure. The content properties editor will appear to the right with the following options:
Drag and drop the image box into an existing structure. Then, click 'Browse' to select your image from the File Manager. Read more about using the File Manager here.
Drag and drop a button to create a CTA and link. The link can lead to a webpage, make a call, send an email, or send an SMS.
Once you've edited the text and style of the button, go to the content properties editor on the right to make more detailed edits.
You can edit the link, button background color and text color, alignment, line height, border radius, padding, and spacing.
Place this page break anywhere on your page to break up the content or sections.
You can also edit the color, alignment, width, and padding of the page divider in the content properties editor to the right.
5. Social Icons
Drag and drop the Social box to add your social icons to your page template.
Once you've placed it, you can edit the icons, links, and share buttons in the content properties editor to the right.
- Select Icon Collection: Select to change the color and styles of all the icons.
- URL: Edit the URL that links when an icon is clicked.
- Click 'Delete' to remove the icon from the section in your email template.
- Click 'Add New Icon' to select a different social icon to appear in your email.
- Select the 'Social Share' tab to prepare a link that can be shared across different social media platforms.
- Lastly, you can edit the Spacing, Alignment, and Padding of the icons in the content properties editor to the right.
6. Dynamic Content
Drag and drop the dynamic content box to a structure in your template to choose Partner Logo, Event Logo, Countdown Timer, or Form you've created. Scroll down to the Adding Dynamic Content section for more information on creating Forms and Countdown Timers.
Add an HTML block anywhere in your email to manually edit the HTML of the page.
In the content properties editor to the right, an HTML editor will appear.
Note: Using your own code may affect how the page is rendered. Make sure to use correct and responsive HTML.
Drag and drop the video box into an existing structure.
Then, click Add a Video URL to add a URL and edit the video content block.
- Add a YouTube or Vimeo URL to generate a preview image of your video in your template
- Add or remove padding for the video. Click 'More Options' to edit each side of the video individually.
- Click 'Hide on Mobile' if you do not want to show the video when a user is on a mobile device
Don't forget to save!
Once you've saved your work, click 'Preview' to take a sneak peek of your Page! You can also toggle between Desktop and Mobile versions to see how it renders.
The fields included in the 'Metadata' tab help search engines and social media platforms categorize your content.
1. General Metadata
- Give your Page Template a Name. This is what will appear in the URL tab when the page is opened. You can use Keyword Variables in the name that will pull in from your Event information and Partners' information.
- Add a Description to display in search results and when shared on social media
- Add an Author for additional context in search results
2. Open Graph Metadata
Open Graph Metadata is used by some social media platforms to allow you to choose what is shown when a link is shared on their platform
- Open Graph Title is the title displayed on the shared content
- Open Graph Object Type is the format of the content when shared on social media (website, article, business, place...)
- Open Graph Image is the URL that a person will go to if they click on the image of the shared content
- You can customize the size of your image using Open Graph Image Width and Height
3. Twitter Metadata
- Add the Twitter handle name that is associated with the website link
- Add the creator of the content's Twitter handle name that is associated with the website link
Adding Dynamic Content
Dynamic Content can only be added to a template once they have been created under the 'Dynamic Content' tab.
1. Countdown Timer
Add a timer that will countdown to an important date (i.e. event date, last day of early registration, etc.).
- Name your timer. This will be the Name that will appear as a Dynamic Content option in the template editor
- The timer will countdown to the date added to the 'Countdown To' section
- Adjust the size of your timer by changing the width
- Text Color, Background Color, and Font are editable to change the display of the timer
Add and customize a form to your template! You can ask users for their contact information or create a questionnaire for them to fill out.
- The Name of your form will appear as a Dynamic Content option in the template editor
- Text Color, Background Color, Font are all editable to edit the display of your form
- Add a Title which will appear as the headline on your form
- Add a Subtitle to provide instructions or additional information
- Add the text shown on your Button included in the form
- Add what you would like your form to tell the user once it has been successfully submitted under your Confirmation Text
- Add the Title of any field that you would like to include in your form
- Add Placeholders to show the user an example in the field box of a valid response
- Check the box to make the answer required before being able to submit the form
You're all done designing your Page Template. Now you can use it in an Invite Campaign for your Partners to promote their participation in your Event.
How can I see what the Page looks like with actual information populated in it?
Go to your Event Partners section, find their Partner Dashboard Link, and you can preview the Page there. We recommend making a "test" Partner using your own company/event information so you can see all the template types using your own information. You can read more about Invite Partner Dashboards here.