How to set up a Spektrix Subsite

Rachael Norris
Rachael Norris
  • Updated

Once you've registered for a Spektrix Subsite, you’ll need to complete the following steps to initially get up and running with your new subsite.

TIP: If you’re completely new to Spektrix Subsites, take a look at our article What is a Spektrix Subsite? to learn more. Spektrix Subsites are managed in Spektrix Link.

 

Getting started

In this article, we’ll walk you through how to:

TIP: Make sure you follow all of the steps outlined in this article to complete the setup of your subsite.

 

Subdomains

The first step that must be completed before we can create your subsite is setting up two subdomains.

  1. The first subdomain will be visible to your customers in the address bar that hosts your subsite pages and should be something like purchase.mywebsite.com or booking.mywebsite.com. Your selected subdomain must be different to any subdomains you have set up for iframes. You’ll need to ask whoever manages this subdomain to set up a CNAME record to app.spektrix-link.com.

  2. The second subdomain (a sub-subdomain) will be your Spektrix Custom Domain that will host the Spektrix iframes. This won’t be visible to your customers. It should be a subdomain of the first subdomain you set up, so that the two domains have a parent-child relationship (which is beneficial for web analytics tracking).
    For example, if your first subdomain is purchase.mywebsite.com, your sub-subdomain could be where tickets.purchase.mywebsite.com.

    For step by step instructions on how to set this up, take a look at our article Custom Domains.

    REMINDER: If you already have embedded Spektrix iframes on your existing website but are moving to Spektrix Subsite, you'll need to do this step.

 

Domain Specific Config

You’ll need to complete the Domain Specific Config set up for your new domain to be linked.

Domain Specific Config can be found in the Website Admin Interface and is where you can apply settings which relate to your website integration.

Follow the steps under the Domain Specific Config section in the Website Admin Interface article.

 

Sharing Baskets/Carts

If you are using a subsite alongside your integrated website, you way want to set up a shared basket/cart page for tracking purposes.

To do this you'll need to make sure that the subdomain for your iframes is the same across both your subsite and your integrated website.

You can do this in two ways:

  • Use a subdomain on subsite (tickets.mywebsite.com). This will require considerations around cookies and tracking. 
  • Use a sub-subdomain (tickets.purchase.website.com). This may require an update to your integrated website.

Your choice will depend on your web tracking needs, or for how long you plan to make use of your subsite and your integrated website at the same time.

 

Log into Spektrix Link

Once your subdomains are set up, a Spektrix team member will need to add your organisation and user profile to Spektrix Link, where Subsites are managed.

After this, you’ll receive an account activation email. Follow the instructions in the activation email to set up your account. Once your account is activated, you can set up other members of your team who you’d like to grant access to Spektrix Link. 

For more information on logging into and accessing Spektrix Link, read What is Spektrix Link?

 

Your Subsite settings

In Spektrix Link, the Websites tab is where you’ll find the details about your subsite.

This page will show:

  • Website Name: the name of your subsite. If you have multiple subsites they will be listed here.
  • Domain: the subdomain you created for your subsite.
  • Status: whether your subsite is Active or Pending Validation.
  • Actions: select from actions including edit, style and settings and delete.

The Edit option is where you can edit the subsite name. Click Save to update this information.

The Delete option will remove your subsite and all the set up configurations. You’ll be asked to enter the website domain to confirm you want to delete it. 

To make changes to the look and feel of your subsite and configure settings related to how information is displayed, continue to the next section. 

 

Style and Settings

To edit the Style and Settings of your subsite, select the cog icon alongside the subsite you wish to edit.

You can toggle between the Style and Settings menu using the buttons below your URL.

styles and settings.png

 

Synchronize Inventory

Under each subsite's menu, you’ll also see an option to Synchronize Inventory and information about when the inventory was last synced. 

By default, this runs every 15 minutes. You can click the refresh icon to update this manually if you have made any changes to styling or settings that you want to see immediately. 

 

Cancel / Save

At the bottom of this section, you will see a Cancel and a Save button. Make sure that you select Save after making any changes that you wish to keep. Changes will only apply once you have clicked Save, and after the system is synchronized. You can select Cancel at any time to abandon any changes you have made.

 

Preview

In the pane on the right side of the screen you’ll see a preview

In the preview pane, you’ll be able to view any visual changes you make. These changes will only apply once you have saved your changes and after the system is synchronized.

 

Subsite Styles

Under the Styles tab, there are a number of ways in which you can configure the visual display of your subsite.

There are some ready made Themes which are shown in the preview screen on the right.

You also have the option to design a custom theme yourself. You can do this by updating the settings for the colours, logo and font styles manually. Using a custom theme means you can more closely match your subsite to your existing website.

Next, we’ll go through each of the sections where you can edit the settings to create your custom theme.

This includes:

Once you are happy with the settings you’ve applied in your custom theme, you’ll be able to view any changes in the preview. These changes will only apply once you have saved your changes and then after the system is synchronized

 

Page Colours

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

 

 

You can apply:

  1. Nav Background: The background of the top navigation bar
  2. Menu Background: The background of the bar for menu items underneath the navigation bar
  3. Page Background: The background colour of the web page.

 

REMINDER: You’ll be able to view any changes in the preview but these changes will only apply once you have saved your changes and after the system is synchronized.

 

Upload Logo

Here you can upload your organisation’s logo to your subsite. You can drag and drop your logo file or click upload image and choose your image from the file explorer.

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, .PNG
  • Have a transparent background or a background colour which matches the Nav Background colour you have chosen.

REMINDER: You’ll be able to view any changes in the preview but these changes will only apply once you have saved your changes and then the next time the system is synchronized.

 

Font Styles

You can update font type, size and colour for the text that appears on your subsite.

You can choose a different style for each of the pieces of text that appear on your subsite: Header, Body, Body Link and Menu Link.

  • From the drop down menu you can choose the font from the list of available fonts from the Google font library.
  • Enter the size of the text in the size box.
  • Enter the Hex code of the colour you’d like in the colour box.

Font styles icons.png

  1. Header: the header title of each page
  2. Body: the body text which shows event details on the Instance details page
  3. Menu Link: the menu items under the navigation bar
  4. Body Link: the text in the footer which contains links such as your Terms and Conditions or Privacy Policy
  5. Top Bar: the icons in the top left

preview text size.png

REMINDER: You’ll be able to view any changes in the preview but these changes will only apply once you have saved your changes and after the system is synchronized.

 

Button Styles

You can update button styles for the buttons that appear on your subsite.

  • From the Button Style drop down menu you can choose from:  Contained, Outlined, Text.

Here’s how these buttons would display.

  • preview contained button.png

  • button outlined.png

  • button text.png

  • From the Size drop down menu you can choose from: Small, Medium or Large.

  • You can choose to change the text colour by entering the Hex code of the colour you want.

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

  • You can choose to change the background colour by entering the Hex code of the colour you want. This colour will also change any icons or captions displaying Instance information.

REMINDER: You’ll be able to view any changes in the preview but these changes will only apply once you have saved your changes and then the next time the system is synchronized.

 

Download CSS

Within the Style and Settings page, you will also see an option in the top right to Download CSS:

After you have applied all of the styling to your subsite, selecting this button will create a CSS version of the styling options you have applied. 

You then need to take this CSS file and upload it into your Spektrix system to apply this styling to your iframes. You only need to upload your CSS file into your Spektrix system once. If you have already uploaded your CSS for your subsite into your system, you won't need to do it again.

REMINDER: You only need to upload the CSS file from your subsite into your Spektrix system once. Any further changes you make will be reflected automatically. Don't download the CSS file from your Spektrix Subsite and upload it to your Spektrix system again.

To upload your CSS file, follow the steps outlined in the Website Admin Interface article.

 

Subsite Settings

Under the Settings tab, there are a number of ways in which you can configure the settings for your subsite.

This includes:

Changes you make will only apply once you have saved your changes and the system is synchronized

 

Google Tag Manager ID

Add your Google Tag manager ID to be able to collect data about your subsite. 

Once that is done, follow the instructions to add your Google Tag Manager container to the Spektrix Purchase Path and configure your Tags and Triggers.

This should be the same Tag you are using on your existing website.

 

Read more about Website Tracking and Spektrix.

 

Limited availability threshold

You can specify a percent in the Limited availability threshold. This will change the Book Now button to say Limited Availability when that threshold is reached. 

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

Spektrix Custom Domain

Under the Spektrix Custom Domain, you should see the URL of the first subdomain you created. This is the subdomain that the iframes use, and is not visible to your customers. This is added by the Spektrix team during set up.

image (13).png

Available Language

Under Available Languages there is a drop down selection box for available languages.

If you have more than one language selected, the navigation bar in your subsite will show a globe icon and culture code with a drop down arrow to let users switch between languages. The languages will appear in the order they are selected. 

Logo Redirect URL

In the Logo Redirect URL field, you can add a link to the logo that appears in the top left corner of your subsite.

The URL must contain https:// for example: https://mymarketingwebsite.com.

 

 

Subsite Navigation Bar

Each subsite has a navigation bar that contains: 

  1. Cart/Basket: this lets the customer see a summary of their Cart/Basket contents. When the customer clicks on this, it will take them to the Cart/Basket page.
  2. Log in status: this lets the customer see whether they are logged in or not.  When the customer clicks on this, it will take them to the Login or Logout page.
  3. The logo: clicking this will take the customer back to the subsite homepage. 
  4. Language icon: this will only show when there are multiple languages and lets the user switch between languages. 

You can also add some other optional items to the navigation by setting this under the Navigation Menu section.

TIP: We recommend adding a link to your primary website on the Navigation Menu so that your customers can go back to it.

 

To add a new menu item, click the + Add new menu button at the bottom left of the table

  • Type: from the Type column you can choose Custom or one of the available iframes. 

You might use Custom for a What’s On link which takes the customer to the Event listings on your existing website, or any other URL which you’d like to link out to.

View Events will create a page which lists all of your Events.

Sign Up Form is a page where customers can join your mailing list.

Choosing one of the iframes, (Fixed Series, Donations, Memberships, Merchandise, Gift Vouchers), will take the customer to a page on your subsite which will display the selected iframe.

  • Label: you can choose the name of the item in the menu. For example, you may wish to decide to rename ‘Merchandise’ to say ‘Shop/Store’.
  • Query Parameter / URL:
    If you choose to have a Custom What's On link, enter the URL you want the menu item to link to into this field.
    If you choose View_Events, or the pages that use iframes, you can enter additional query parameters that enable you to filter or sort iframes.
    You can also choose to leave this field blank.

 

You can also delete menu items using the trash icon.

To rearrange the order of the menu items, click and drag using the six dots icon.

 

Footer Menu

You may wish to add links to your Privacy Policy, Terms and Conditions or any other links into the footer of the subsite. 

footer menu Preview.png

To add a new menu item, click the button at the bottom left of the table which says + Add new menu:

You’ll need to add the following:

  • Label: enter the name of the item in the menu. 
  • Query / Parameter / URL: enter the URL you want to link to.

TIP: Add in links to pages on your existing website. For example, existing Privacy Policy and Terms and Conditions pages. You won't be able to create these pages using Spektrix Subsite.

footer menu.png

You can also delete menu items using the trash icon. 

To rearrange the order of the menu items, click and drag using the six dots icon

Further Reading

Once you have completed the set up steps for Spektrix Subsite, read the next article, Configuring a Spektrix Subsite, to start adding Events to your subsite.