Umbraco Backoffice Documentation

Contact

UI element which displays a row of contact options. Contact options are displayed in a single row on desktop devices (device width more or equal to 992px), 2 rows on tablet devices, and one above the other in a row of 2 on mobile devices (device width less than 992px).

Content

Contact page component has one mandatory content parameter:

Contact

Content Picker which accepts Contact Component element. Contact Component can be configured inside the UI/Contact Us folder inside Umbraco Content section root.

The main advantage of using the Content Picker is reusability. Once the Contact Component is created, it can be reused everywhere on the website. This prevents having different contact options on different pages and keeps it consistent.

Contact Component

Contact Component has four mandatory content parameters:

  • Telephone - telephone option displayed in Contact page component.
  • Live Chat - live chat option displayed in Contact page component.
  • Email - email option displayed in Contact page component.
  • Address - address option displayed in Contact page component.

Every Contact Component content parameter (Telephone, Live Chat, Email, Address) is made of Contact Item.

Contact Item

Contact Item building element has three optional content parameters:

  • Link - a URL to another page or website.
  • Contact Label - contact option name label below the Contact Item or Contact page component contact option button.
  • Contact Estimate - time estimate label below the Contact Item or Contact page component contact option button.

Also, it has one setting:

  • Hide - hides the element in Contact page component.

It is not necessary to fill all the values inside the Contact Item. However, the elements will still be visible on the page even with the empty values. Thus, if the contact option is left empty or is not needed it is recommended to toggle Hide setting inside the Contact Item settings instead.

It's possible to create different variations of the same Contact component just by hiding some contact options.

Contact page component without the Address

Contact page component without the Address and Live Chat

Settings

Contact page component has the following setting:

  • Hide - hides the component.

Contact Component Color

Contact component color changes automatically based on the background color. The Contact component is made with accessibility in mind, so that the component would have enough contrast to the background color for people to read it easily. However, Contact component shouldn't be put inside the tombola teal colored background because it won't be accessible.

Previous section:

Game Jackpot

Next section:

Offer Banner