TUX: How to Design a Smart Page

Making compelling, 1-1 content is powerful. Making compelling, 1-1 content at scale is costly. Enter smart pages. This article will walk you through the steps to get started with your smart pages. For more detailed information on campaigns read our Smart Page Overview article.

Steps to Designing a Compelling Smart Page

1. Brand Styling
2. Section Selection
3. Contextualizing Your Design
4. Card Stylization
5. Determining Personalized Content (Field Merges)
6. Smart Page Group Template Creation and Editing
7. Configuring a Vanity URL

Step 1: Brand Styling

One of the most important aspects of Smart Page design is creating a page that resonates with your brand guidelines in order to give it the most professional and polished look. Here are some key things to have on hand before you start configuring a template:

• Core brand colors. This could any form of CSS colors, such as be rgba or hex values. Our default template supports up to 4 distinct brand colors.
• Brand font.If you use a custom font, you will need to have a publicly hosted link to be able to reference on the smart page. If you use a google font, you will just need to have the font link to add to your page.
• A general sense of how any CTAs should look. Do your CTAs have curved boarders? Do they have any hover effects? etc.
• Key assets or content you want to utilize. There is a card section included on these pages by default which can house key pieces of content that you want to make available to account visitors. You will need links to the content as well as any graphics that summarize the content, which could include things like stock images, custom graphics, or any other form of graphics.
• Forms you may want to embed on the page. Because of the highly personal nature of these pages, smart pages can be a great mechanism for driving conversions. Our default template has sections with some default styling for Marketo and Hubspot forms.
• Rep information. (Optional) One of the core uses of Smart Pages is for reps to use in their outreach to accounts. Having rep information on hand, such as names, email addresses, calendar booking links, LinkedIn pages, etc, is a great way to contextualize these pages to your business needs.

The step of smart page design is deciding what the overall layout of the page will look like. This section selection process will govern the copy and content you will need to complete the page build.

Here are some common layouts that are used in smart pages:

Layout 1

• Nav Bar
• Hero Section - Great for welcoming visitors to the page and giving people a taste of what to expect
• Card Section - Used to provide the key pieces of content for visitors to interact with
• Rep Information - Essential for driving follow ups from the page interactions
• Footer

Layout 2

• Nav Bar
• Video Highlight - Provide a more visually way for visitors to be welcomed to the page
• Card Section - Used to provide the key pieces of content for visitors to interact with
• Form Embed - Drive engaged leads off the smart pages
• Footer

Layout 3

• Nav Bar
• Hero Section - Great for welcoming visitors to the page and giving people a taste of what to expect
• Key Insight Highlights - Distill key points for your site visitors to help them understand how you can meet their business needs
• Card Section - Used to provide the key pieces of content for visitors to interact with
• Footer

By default we have a general template design that includes a lot of options for you to choose from regarding your overall layout. To get going with your section selection, follow these steps:

1. Navigate to the Asset Library section in the left hand navigation of the Triblio platform
2. Click the 'New Asset +' button on the top right of the screen, select 'Smart Page' under 'other', give it a friendly name and then select the template you want to start building from

1. In your new Smart Page Group, select the Edit Template button, which will take you into our point-and-click template editor

2. Click into each section to decide if you want to keep or delete itMove the section up and down the page by using the Move Up and Move Down buttons in the section editor. Delete a Section by clicking the Delete Section button.

Step 3: Contextualizing Your Design

Once you have configured the overall layout of your Smart Page, the next step is to update the overall look and feel of the page to be more in step with your brand colors, fonts, and styles. 

A couple of things to know about designing Smart Pages. The pages are standard HTML pages, so any CSS or Javascript as well as any libraries, such as Bootstrap are eligible for designing the pages. Additionally, our card section utilizes Isotope,js for the card layout.

There are two core places for you to input css styling on a given Smart Page: 

1) The container HTML via the blue Theme Setting in the top right hand corner 

2) In a given section within the template editor in the 'Advanced' Tab:

Best practice for  Section design is to contain all of the necessary layout css to be written within the section itself. You can see examples of this in our default template. Each section contains the necessary CSS for that section in a <style> tag at the top of the Raw HTML, accessible through the Advanced drop down of each section. This is the case for two reasons. First, this makes quick edits to a particular section a lot easier since the governing CSS is localized to the section itself. Second, you can save Sections for re-use on other templates by using the Save Section button. Having all the necessary CSS directly related to the Section allows for easy implementation on future Smart Pages.

If you are using our default template, there is a space for you to input your brand colors in the  Container HTML. Inputing your brand colors here will propagate those colors throughout the template and enable you quickly stylize your whole template.

Here is a list of all the things on the page that each of the colors controls:

• Primary Brand Color: This primarily handles backgrounds on the page and is paired with the Primary Font Color
  • Backgrounds: Hero, Cards, Default Primary CTA, Header Section, Video Box, Form Boxes, Rep Info Background, and Footer
• Secondary Brand Color: This primarily handles the main background color of the page and is paired with the Secondary Font Color
  • Backgrounds: Nav Bar, Main Page Body (Which includes most of the Sections on the template)
• Tertiary Brand Color: Card CTA Color, Default Secondary CTA Color, Section Line Break
• Quaternary Brand Color: Key Insight Graphic Backgrounds, Specific Card Styles
• Primary Font Color: This governs the color of all text in primary brand color Sections
• Secondary Font Color: This governs the color of all text in secondary brand color Sections
• Brand Font: This governs the font of the entire Smart Page

Additionally, you can govern the style of your CTAs on the page if the default cta style doesn't suite you:

Once your core Sections are styled, you are ready to finalize the copy in those sections and to progress to card creation and styling.

Triblio Tip

Just getting started with Smart Pages? Choose a prospect or customer stage (such as a certain tier accounts, all decision stage accounts, or all current customers), and design with that stage in mind. Ask these questions to help you think through what content to put on the page:

• What content performs the best for this segment?
• What information is most important for accounts in this stage to have easy access to?
• Am I looking to get form conversions from this segment?

Step 4: Card Stylization:

In the  Card Section of the Smart Page Editor, you can manage what content should be included on the page.

Each card has two key sections:

1. The Upper Image Section: 
2. The Lower Text Section: This section houses the main content of the card
   1. Card Title: This should represent what the client will get by engaging with this card. It should be no more than 80 characters.
   2. Card Description: This should briefly describe the value of the content that the card represents. It should be no more than 130 characters.
   3. Card CTA: This is an optional feature of the default Triblio template and can be utilized by adding a class. The class name should start with "cta--" and then be a hyphen (-) separated call to action, for example: cta--Read-More, cta--Download-Here, and cta--Find-Out-More. These will render as the following on a card as the following: Read More, Download Here, and Find Out More. You can also position the CTA by adding a class cta-center or cta-right to the card (the CTA is positioned to the left by default).

Note: If you want to add this capability to one of your Smart Pages that does not utilize the default template, copy and paste the code located here at the bottom of your Smart Page's Container HTML

To add in new pieces of content to the page by clicking the   Add Card button. A dropdown will appear that will show you content type options:

Browse Card Library: A dialogue box will open up that will show past cards that have been uploaded before.

Link Item: If you want to direct someone to a key piece of hosted content (a blog, a resource, etc.) you can use this option. The card will capture the meta data on the page and load it in as the default copy of the card.

Custom HTML: This allows you to design a special card out of HTML. It is great for embedding a small form or other unique piece of content.

Embed Video: This will render a playable card. It is great for YouTube videos. We recommend using a a card width of 2 for these card types.

File: This allows you to add a particular file to the page for download, you can upload it with this card type. The title of the card will be the title of the file. You can update all the additional data points by clicking and editing the card.

PDF: This allows you to add a particular PDF to the page for download. The title of the card will be the title of the file. You can update all the additional data points by clicking and editing the card.

Default Styling Available

Additionally, our default Smart Page template has four core card stylings available:

1. The Default Style: All cards added to this page will have this style by default.

2. Mat: To utilize this card style, add the class 'mat' to the card. You can find a live CodePen demo of these card styles here.

3. Stripe: To utilize this card style, add the class 'mat' to the card. You can find a live CodePen demo of these card styles here.

4. Scale: To utilize this card style, add the class 'scale' to the card. You can find a live CodePen demo of these card styles here.

Note: The cards are not designed to be used in combination with one another. Your Smart Page should choose a particular card style and use it universally.

Step 5: Determining Personalized Content (Field Merges):

One of the most powerful elements of  Smart Page design is the ability to load content dynamically by account in the form of Field Merges. Consult our Custom Data article to see Smart Page specific guidance on utilizing field merges on your smart page.

In general, the best candidates for Smart Page, account specific personalization are the following:

• Highlighting a specific pain points and solution for a given account
• Unique account manager, customer success manager, or sales rep information: Images, Contact Info, Name, etc.
• Account name
• Custom graphics (such as a logo) or video content

Step 6: Smart Page Group Template Creation and Editing

Once you have completed the design of your template, you are ready to convert your design into a Group Template that can be used over and over again.

To do this, just go to the blue Theme Settings button on the top right hand of your  Smart Page Group and select the Save As  Template button. From there, you will be prompted to give the template a name.

We recommend using a clear name for the template that helps you remember what the page was designed to accomplish, such as  "Sales Rep Account" or Customer Success Onboarding.

If you want to edit a template that you have already created, simply navigate to the  Smart Pages side navigation in the app, and select the Template Editor button on the top of the page. 

Then select the template you want to edit and at the bottom of the modal click edit:

This will take you to a very similar editing experience of the Smart Page group, with additional options to edit the container HTML of the page:

Two things to note about the template editor:

1. Unlike the standard Smart Page Editor, any changes made to the template must be saved. To preserve your changes, hit the green save button at the top of the template:
2. Edits to the master Smart Page Group template will NOT propagate to Smart Page Groups that were created from it. Any design changes will need to be made to the Smart Page Group itself.

Step 7: Creating a Vanity URL

By default, all Smart Pages use a tribl.io URL. To update the default URL for a Smart Page to a vanity domain, you'll need to create a new sub-domain pointed at tribl.io. To setup a vanity domain you will need to add a CNAME record with your DNS provider that points your sub-domain (hubs.yourdomain.com for example.) at tribl.io. This is normally handled by IT teams or whoever manages your company's website domains.

Sub-domains can be anything you want, such as abm.yourdomain.com, smartpages.yourdomain.com, resources.yourdomain.com, etc. Once that CNAME record is setup, you can select the Vanity Domain Setup button toward the top right of your Smart Page editor and add it to the list of available subdomains within your Triblio org.

Finally, click Actions -> URL Settings and select your new vanity domain in the dropdown under "Select Domain for Smart Page URLs". When you click "Save", all Smart Page URLs in the group will be updated to use the vanity domain.