Search

Subsite Styles and Settings

Rachael Norris
Rachael Norris
  • Updated

You can configure the visual appearance of your Subsite in the Styles and Settings section of Spektrix Link. This article explains the different available settings and how to configure them.

TIP: Subsites meet WGAC 2.1 AA Level Standards for accessibility, aside from the ChooseSeats.aspx iframe. When creating default colour schemes, it is your responsibility to make sure that these also follow your accessibility standards.

 

Previewing changes

As you update your Subsite Styles and Settings, we recommend you regularly save and preview your changes. 
 

To save and preview your Subsite:

  1. Click the Save button at the bottom of the page.

  2. Synchronise inventory. By default, this automatically runs every 15 minutes. This fetches the most up to date changes from your Spektrix Admin Interface, for example, new Events or Attributes. Click the Sync icon button to synchronise manually at any time.


     

  3. Click the URL of your subsite to view your changes. You’ll be prompted to enter a Web Event ID. You can enter a Web Event ID or any random number (e.g 000000) in this field and click Ok to be taken to your Subsite preview.

TIP: If you’ve followed the steps above and your changes aren’t reflected, try clearing the cache in your browser.


 

Subsite Settings

Under the Settings tab, you can configure the settings for your Subsite.

This includes:

REMINDER: Changes will only apply after saving your settings and synchronising with your system.

 

Google Tag Manager ID

Add your Google Tag Manager ID to collect data about your Subsite in Google Analytics.  Follow the instructions on the Integrate Portal to configure your Tags and Triggers.

If you use your Subsite in conjunction with a primary website, you should use the same Google Tag Manager ID on both websites.


 

Read more about Website Tracking and Spektrix.

 

Limited availability threshold

The limited availability threshold decides when the Book Now button on the Event Availability page changes to Limited Availability. 

Enter a percentage number in the field. When this threshold is reached, the Book Now button will display Limited Availability instead. 

For example, if you set the limit at 10%, when 90% of the available tickets are sold, the Limited Availability button will show.

 

Available Language

Select the languages for your Subsite from the Available Languages dropdown.

If you have more than one language selected, the navigation bar in your subsite will show a globe icon and culture code. Customers can switch between languages by clicking the dropdown arrow. The languages will appear in the order they are selected. 

 

Logo Redirect URL

You can enter a link in the Logo Redirect URL field so that if a customer clicks your logo, they’ll be directed to your home page.

The URL must begin with https:// 

 

Spektrix Custom Domain

Enter your Spektrix Custom Domain here.

Find out more about setting up a subdomain for your Subsite in our article on How to get started with a Spektrix Subsite.

 

Subsite Styles

Under the Styles tab, you can configure the visual display of your Subsite.

You can choose from a ready-made Theme or create your own custom theme by updating the settings for the colours, logo and font. Using a custom theme means you can more closely match your Subsite to your existing website.


 

Page Colours

In the page colour section, enter the HEX codes of the colours you’d like to use on your Subsite. 

 

You can set the colour for:

  1. Nav background
  2. Menu background
  3. Page background

 

 

Logo

Upload your organisation’s logo to your Subsite. 

Your logo will need to meet the following requirements:

  • Recommended image size: Height up to 180px, width 180px or wider. If your image is wider than 180px, make sure it displays correctly on mobile devices.
  • Maximum file size: 1MB
  • Supported image files: .svg
  • A transparent background or a background colour which matches the Nav Background colour you have chosen.
     

Drag and drop your logo file or click upload image and choose your image from the file explorer:

You can remove your logo by clicking the Remove Logo button in the upper right corner.

Your logo will appear in the top left corner of your Subsite:

 

Favicon

The favicon is the logo that appears on your browser tab. 

Your logo will need to meet the following requirements:

  • Recommended image size: 16 x 16
  • Maximum file size: 512.0 KB
  • Supported image files: .PNG, .gif

Drag and drop your logo file or click upload image and choose your image from the file explorer:

You can remove your favicon by clicking the Remove Favicon button on the upper right corner.
 

Your favicon will appear in the browser tab when on your Subsite:


 

Font Styles

You can choose a different font for the Header, Body, Body Link, Menu Link and Top Bar on your Subsite.

The fonts that are available for your Subsite are populated from the Google font library.

You can change the Font, Size, and Colour (using HEX codes).
 

Font styles icons.png

  1. Header
  2. Body
  3. Menu Link
  4. Body Link
  5. Top Bar

REMINDER: You’ll be able to view any changes in the preview after saving your updates and synchronising with your system.

 

Button Styles

You can update how buttons display on your Subsite in the Button Styles section:

  • Button Style: Contained, Outlined or Text.

  • Size: small, medium or large.
     
  • Primary text colour: enter a hex code for the button text colour.
     
  • Primary background colour: enter a hex code for the button background colour. For Contained buttons this is the background colour. For Outlined buttons, this is the hover over colour. This colour will also change any icons or captions displaying Instance information.
     
  • Secondary text and background colour: for the contained button style you can add a secondary colour which will change when the button is hovered over. The secondary colours are displayed when the customer hovers over the button. If you don’t set the secondary colour then the primary colours will be inverted for the hover over.
     
  • Rounded: check the box to round the edges of your buttons.

TIP: Make sure there is enough contrast between the Text Colour and Background Colour for your button to be read accessibly.