Creating a theme to white label your customer experience

What is White Labelling?

White labelling allows you to create a bespoke customer journey using your own branding and designs. Brand specific colours, typography and logos can be applied to the checkout stage, ticket wallet emails and other customer facing areas of the platform.

Why Use It?

Our white labelled solution will help create a seamless, branded customer journey for your users.

This will not only ensure that your customers experience a cohesive and branded ticketing experience from start to finish, but also strengthen your brand identity.

How?

To start customising your customer journey, a unique subdomain needs to be set up.

The subdomain usually follows the format;https://yourorganisation.citizenticket.com/

A subdomain is a mirrored version of the Citizen Ticket platform and website, however it allows you to customise it to fit with your brand image and to create a seamless experience for your customers when purchasing tickets.

Your custom subdomain’s browse events will also be filtered to your organisations’ events, improving the customer user experience.

Please contact your Account Manager directly to arrange this.

The following guide will explain how to use our “Themes” tools and which areas of the website you can customise.

Getting Started & Theme Management

Once enabled on your organiser account, you can start customising your theme via your Organiser Profile settings, under “Themes.”

You can create multiple themes if you wish, to give you more flexibility and variety when it comes to your website design.

This is also a benefit as you can be editing a new theme without affecting the main website that is live. You can preview any changes you are making as you go.

To get started, press “+Add Theme”, set a name for your theme and begin customising areas of the customer journey.

Activating and Deactivating Themes

When you click “Add Theme” you are given the Citizen Ticket default colour scheme and branding as a starting point. Please feel free to start updating it with your logos and branding.

When you are ready to make your theme live, please toggle the option to activate a theme on the main themes management page.

Updating Live Themes

Please note, you cannot update a theme once it is live as this would affect the user experience when on your webpage.

Instead, if you wish to update your theme, or make edits, then please do the following:

1. Duplicate the existing themes that is live and update the name, if neededDefault name would be Copy of {xx theme name}
2. Edit the copy and apply any changes
3. Toggle the option to activate this new theme
4. The one that you had previously been using will deactivate itself

Previewing the Appearance of Your Webpage

Use the tabs at the top of the page to preview the desktop, mobile, or email versions of any edits that you make before you finalise your setup.

As you are working through each section of the themes, please press “save” to update the pages and load any changes that have been made.

When you open themes, the first page that you can see to preview is the organiser landing page.

If you wish to navigate between the different pages in the customer journey, or in your account settings, then you can do so by navigating within the preview area.

Note - If you have an event that is published and public on your organiser profile, then you can go through the customer journey and preview the changes.

Fonts

We support any font from the Google library.

You can customise your main headings, subheadings, body and labels.

Examples of where these are used across the site are:

• Headings - main event title
• Subheadings - event short descriptions, order summary text at basket stage
• Body- main text used across the site
• Labels - any titles above a form input e.g. customers inputting name and email address at the “Account” stage

Text

Choose a colour for your headings, subheadings and main text

Backgrounds

Choose a colour for your background for the following areas of the website:

Header/Footer background

• Applies to the header and footer of the webpage
• This is usually based on the logo and styling that is being used in your branding

Body Background

• Applies to the core colour of the website

Poster Background

• Applies to the space surrounding your main hero banner or poster image on the event page. This means that the poster image can seamlessly work across all devices

Event Information Background

• Applies to the background of the event long description used on the event page

Navigation

Any links that are in the header of a page can be customised

Link Radius

• You can adjust the link radius px to either sharpen, or soften the borders around buttonsE.G. “Search” and “My Basket” in the navigation bar
• These are set as 1px by default which gives it a more square appearance on the page. You can increase the px to create softer, rounded borders.

Link Colour

• Change the colour of the text for any links in the header of the page

Active Link Colour

• This refers to a hyperlink that when clicked by a user, will redirect them to another webpage, or resource.
• In this case, it highlights the page that the user is currently on (E.G. “Search” on the organiser landing page)

Active Link Background

• Applies to the background colour of the button highlighting the page that the user is currently on

Account Link Colour

• Applies to the colour of the text that appears in the submenu when clicking on your account icon in the top right corner

Link Font

• Font used for links in the header of the page

Logo

• Upload your logo to appear in the header of the page

Landscape image is preferable

• The height can be adjusted for the navigation bar at the top of the page, but the more you increase the size of the image, the more header space it will take up.The default height is 56px

Logo Click URL

• Add a redirect URL when a user clicks on the logo itself.If left blank, the default link that is used will take users back to your own subdomain on Citizen Ticket

Subpage Nav Background

• This mostly affects the navigation for users and appears at the top of a customer’s Ticket Wallet page

Subpage Nav Link

• Highlights the page that the user is currently on in the subpage navigation bar (E.G. “Ticket Wallet”, “Transfers”, “Receipts”)

The colour is set to black by default

Subpage Active Nav Link

• Highlighting the link/text of the page that the user is currently on

Links

Link Text

• Applies to the main links on webpage

Link Text (Hover)

• Colour when you hover over a link

Inputs

Inputs refer to areas in the customer journey that have a field/box where information needs to be entered by the user.

Examples of inputs used in the customer journey are: users entering account information at the checkout, answering ticket questions, discount/voucher code and account settings page.

Background

• Corresponds to background of the input box

Set as white by default

Borders

• Applies to the Border outline of the input box(e.g. Accounts, confirm email address etc.)

Label

• Applies to any wording used above an input box (e.g. repeat password)

Text Colour

• Colour of the text used for labels

Buy Box

This refers to the main “Buy Tickets” form/widget on the main event page

Background

• Colour of the background of the buy box itself

Set as white by default

Text

• Colour of main text in the buy box (E.G. ticket titles)

Price

• Colour of the total price to be paid by the customer

Breakdown

• Colour of the text used for the booking fee breakdown shown directly below the total price

Border

• Colour of the border of the buy tickets form

Footer Text

• Colour of text at bottom of the buy box (E.G. “No hidden fees”)

This only needs changing if you have altered the border colour of the buy box

Checkout

Customise the look and feel of your checkout

Basket Background

• Change the background colour of the basket and order summary

Basket Text

• Change the colour of any text that appears in the basket and order summary

Basket Label

• Change the colour of subheadings within the basket and order summary E.G. “Event”, “Date”  “Ticket” “Quantity” “Price”, “Subtotal”, “Booking Fees”  

Basket Link

• Change the colour of any link within the basket summary area E.G. Refunds policy tool tip

Basket Link (Hover)

• Change the Hover colour for any link within the basket and order summary area E.G. discount or voucher code?

Email

Customise any  emails that are sent to your customers, such as Ticket Wallet email, Gift Voucher emails and even system emails such as One-Time-Code or Forgot Password.

Please navigate to the “Email” tab in Themes to preview any changes you are making in real time.

Subject

• Main subject/title of the email E.G. “Your Ticket Wallet”, “Gift Voucher”

Background

• Main background colour of the emails

Container Background

• Background colour for the main content of the email

Ticket Container Background

• Background colour of the containers which detail ticket information for various events

Ticket Text

• Colour of the main event name that appears above the ticket information

Ticket Link

• Any links that appear in the ticket container e.g. add to calendar, view on map

Ticket Wallet Description

• Provide additional information about your event, or organisation in a customer’s ticket wallet email
• This appears directly above the customer’s selection of tickets in their wallet.

Please bear in mind that this applies to all events that are on your organiser profile, so keep it relatively generic/applicable to all events

Logo Height

• Adjust the height of the logo used in your Ticket Wallet emailsUse as much height as you need to make your logo look as intended
• Please note, the logo that you have used and uploaded for your header will be used for all emails that are sent via your organiser profile E.G ticket wallet email

From

• Change the sender ID used for your emails, for example, your organiser name

If left blank, the default sender will be “Citizen Ticket”

Image: Ticket Wallet Email

Buttons

Customise all buttons that appear on your organiser landing page, customer journey and in your account settings, emails etc.

Radius

• You can adjust the radius px to either sharpen, or soften the borders around buttons
• These are set as 1px by default which gives it a more square appearance on the page.Increase the px to create softer, rounded borders

Primary Background

• Background for all primary buttons E.G. Buy Tickets button

Primary Text

• Colour of the text in all primary buttons

Primary Border

• Colour of the border surrounding all primary buttons

Primary Background (Hover)

• Background colour of the button when you hover over it

Primary Text (Hover)

• Colour of the text when you hover over it

Primary Border (Hover)

• Colour that appears on the border when you hover over the primary button

Secondary Background

• Appears in modals that pop up when a customer/user carries out an actionE.G> customer goes to edit their basket “No, cancel” button

Image: Example event page