Contact Boxes

Owned by Zachary Restifo
Last updated: Mar 05, 2021
4 min read

Contact Box components are used to help visitors find contact information in a quick and concise format.

The following instructions will provide information on how to create and insert Contact Box components into your page via Tridion.

 

Table of Contents

 

Creating a Contact Box Component

The first step in adding Contact Boxes is to create a Contact Box component:

Click New Component (blue) to begin creating a Contact Box component.

 

In the Building Blocks folder of your respective website, click New Component (highlighted in blue above) in the Create tab (highlighted in yellow above) of the navigation bar.

You will be taken to a new page for creating the component (shown below):

 

Creating a Contact Box component.

 

There are a few important steps to creating a Contact Box component:

  1. Name the component.

  2. Choose Contact Box from the Schema drop down menu (highlighted above in yellow).

  3. Enter the appropriate text for Title.

  4. Choose what type of contact information you want to list in the contact box with the Contact type drop down menu (highlighted in blue above).

  5. Enter the Contact Email, Telephone or Fax number.

  6. You can also add additional info with the Additional info text field.

  7. You can add or delete contacts and links with the + and trashcan icons, respectively (highlighted in red above).

  8. You have an option to add a link to appropriate content already published on your website, if desired.

    • To do so, click the magnifying glass icon to the right of the Links field (highlighted in green above).

If you choose to add a link by clicking the magnifying glass icon, the Building Blocks folder will pop up in a new window (shown below):

 

Your Building Blocks folder, showing other content on your website that you can link to in the Contact Box.

 

Select the Content you want to link to, and click Insert (highlighted in yellow below).

Back in the window for creating the component, you can review the information in the Contact Box.

 

 

When you are satisfied with your Contact Box component, click Save and Close (highlighted in yellow above).

 

Inserting a Contact Box Into a Page

To put a Contact Box onto a web page, you must navigate to the desired page in the root folder and open it.

  • Click Insert in the Component Presentations tab, which will open up the pop up with the Building Blocks folder in it (shown below):

Inserting the Contact Box component into your page.

 

Select the Contact Box component you created, then choose either Contact Box or Contact Box #side from the Component Template drop down menu (highlighted in yellow above).

  • If you choose Contact Box, the Contact Box will appear in the main part of the page.

  • If you choose Contact Box #side, the Contact Box will appear in the side navigation of the page (an example can be seen later in these instructions.

Once you’ve chosen the type of component you want, click Insert to add it to your page.

Back in the window for your page, click Save and Close and you are ready to Publish.

 

Contact Box Examples

Below is an example of a Contact Box (both normal and side) component, as it lives on a web page:

Side (yellow) and regular (green) Contact Boxes as they appear on a web page.

You can see an example of a regular Contact Box (highlighted in green above) and and side Contact Box (highlighted in yellow above).

  • Both types have the Title, Additional Text, a link for the Email contact info, and a button or link for the additional content we linked in Tridion.