Umbraco Backoffice Documentation

Website Component

Website component is the root of the website and the parent component of the Home Page. It acts as a master layout to give the main skeleton and functionality for the entire website. Any changes done to the Website component will apply the changes to the rest of the website.

Website component inside Umbraco Backoffice

Website component inside Umbraco Backoffice

Website component has 10 configuration groups which reside inside the Website component and are grouped in tabs:

  • Website - configuration for general website components.
  • Header - configuration for a strip on top of the website.
  • Footer - configuration for a bottom section of the website.
  • Contact - configuration for the contact support options on the website.
  • Social Media - configuration for social media links on the website.
  • Safeplay - configuration for regulatory Safeplay components.
  • Layout - website layout configuration.
  • SEO - search engine optimization configuration.
  • Cookie Consent - configuration for OneTrust cookie banner.
  • Tracking - tracker configuration, a place to add trackers such as GTM or Optimzely which will be applied to the entire website. To read more about the Tracking configuration go to the Tracking Page.

Website

Configuration section to set up some of the generic website components, such as website logo.

tombola header logo screenshot

Desktop Header Logo

tombola mobile header logo screenshot

Mobile Header Logo

Website has one content parameter:

  • Website Logo - an SVG logo with a URL to the home page which is displayed on the website header and in some cases footer. By default, either a tombola or tombola arcade SVG logo will be displayed with a link to the home page. Both or either SVG and/or link can be overridden with a different value if needed, however, it is recommended to leave this empty.
Website configuration screenshot

Website view in the Umbraco Backoffice

tombola header

Desktop Header example from tombola Bingo site

footer screenshot

Desktop Footer example from tombola Bingo site

Contact

Configuration section to set up the contact support options for each environment which are going to be displayed on the website footer and on the contact page components on the site.

Footer support buttons screenshot

Desktop Footer Contact Support icons

Contact has 4 sections, one for contact support headings and three for the different environments contact support links, with 3 content parameters each:

  • Contact Headings - supporting helper headings which are used in some of the components and places on site.
    • Telephone Support Heading.
    • Live Chat Support Heading.
    • Email Support Heading.
  • Contact Links - (Live, Staging, Development) Environment - a list of links of the support options for each environment.
    • Telephone Support Link - URL needs to start with "tel:" to indicate that it is a telephone support option. The Link should look similar to tel:010101010101.
    • Live Chat Support Link - URL should have a link to tombola Live Chat.
    • Email Support Link - URL needs to start with "mailto:" to indicate that it is an email support option. The Link should look similar to mailto:[email protected]
Website Contact configuration screenshot

Website Contact view in the Umbraco Backoffice

Social Media

Adding the links to the social media channels on the Social Media tab will add social media logos to the Header Navigation Menu and Footer on the entire website.

Social Media has three content parameters:

  • Facebook Link - a link to the tombola Facebook channel.
  • Instagram Link - a link to the tombola Instagram channel.
  • YouTube Link - a link to the tombola YouTube channel.
Website Social Media configuration screenshot

Website Social Media view in the Umbraco Backoffice

Safeplay

Configuration section to set up country specific regulatory Safeplay components, such as tombola Sweden's Safeplay header. This component adds a header strip above the main header and contains created links.

tombola header with Safeplay header with text screenshot

Desktop Header with Safeplay Header with text example

tombola header with Safeplay header screenshot

Desktop Header with Safeplay Header with links example

Safeplay has two content parameters and one setting inside a Safeplay Header group:

  • Safeplay Header - enables the Safeplay Header to be shown on the page.
  • Safeplay Header Text - a rich text description which adds a row of text to the Safeplay Header.
  • Safeplay Header Links - a list of links with an image and a URL to another page or website which will be added to the center of the Safeplay Header.
Website Safeplay configuration screenshot

Website Safeplay view in the Umbraco Backoffice

Website Layout

Website layout consists of three main parts Header, Footer and Page Content, which is made of the Section Layouts and Page Components.

Each part of the layout can be turned off or hidden. The Header Navigation MenuHeader and Footer can be disabled inside the Website component Layout tab while Page Content can be hidden inside each page by toggling Hide setting on either the Section Layout or Page Component.

Website Layout has the following settings:

  • Navigation Visibility - disables Header Navigation Menu in the Header. This setting hides the Navigation Menu on the entire website.
  • Header Visibility - disables website HeaderThis setting hides the Header on the entire website.
  • Footer Visibility -  disables website Footer. This setting hides the Footer on the entire website.
Website Layout configuration screenshot

Website Layout view in the Umbraco Backoffice

SEO

Search engine optimization configuration or in other words SEO, can be configured for the Website component to add SEO configuration settings to the rest of the website. Additional information about SEO can be found on the Search Engine Optimization Page.

SEO has the following settings:

  • Robots (optional) - instructions to the search engines whether to crawl a page and show it on organic search results on Google or Bing. To read more about this, visit Robots section on Search Engine Optimization page.
  • Canonicalization - adds auto generated canonical link tag to every website page. To read more about URL canonicalization visit Google URL canonicalization guide.
  • Canonical Website Domain URL Override - canonical link tag URL domain override. There are content parameters for each environment (Development, Staging, Live).
SEO configuration screenshot

SEO view in the Umbraco Backoffice

Tracking

A place to add trackers such as GTM or Optimzely which will be applied to the entire website. To read more about the Tracking configuration go to the Tracking Page.

Previous section:

Brochureware

Next section:

Header