Spektrix Custom Building Blocks and App Blocks

Spektrix provides Custom Building Blocks and App Blocks which can be used to add powerful liquid script functionality to your emails without having to write the code yourself.

This article details all of the available Spektrix App Blocks and Custom Building Blocks. 

Spektrix Blocks

There are two types of Blocks that we use to provide custom content you can use in your Dotdigital emails.

Custom Building Blocks: Spektrix Custom Building Blocks are pre-made, editable blocks you can add to your emails. You can rearrange the content within them and apply your own styling.

The available Spektrix Custom Building Blocks are:

• Supplementary Events Upsell

App Blocks: Pre-made custom code blocks which add Spektrix integrated functions to your emails. You cannot edit the layout or styling within App Blocks. Any content within App Blocks will follow the email style settings.

App Blocks can be found in the EasyEditor under the Build tab on the menu on the left and below the images dropdown.

The available Spektrix App Blocks are:

• Pre Event Liquid Header
• Ticket Block and Seat Summary Block
• Membership Sales Header
• Membership Card
• Membership Wallet Buttons
• Donation Header
   

Supplementary Events Upsell Block

The Supplementary Events Upsell Block can be added to your Pre-Event Email to direct your customers to a Subsite Supplementary Events page filtered by date.

To use this block in your Pre-Event Emails, you will need to:

• Use a Spektrix Subsite
• Set up Supplementary Events
• Use the Pre Event Liquid Header in your Pre-Event Email
• Set up the Subsite Subdomain Data Field

• Create a new Instance Attribute as a checkbox and visible in the API, named exactly:

  dotdigitalPreEventSupplementaryUpsell
   

• Apply this Attribute to Instances where you’d like to display the Upsell Block in the Pre-Event email.
• Add the Supplementary Events Upsell Block to your email and customise the block with your organisation’s Supplementary Event information.

To customise the Supplementary Events Upsell Block, you will need to replace the text and upload an image. You can also update the button text and apply any other custom content and styling elements. 

In the Otherwise section, you can leave this blank to not display anuthing if there are no connected Supplementary Events, or, you can add an alternative message to display in this scenario.

When the customer clicks the button, they’ll be directed to Supplementary Events page on your Subsite which displays Supplementary Events with the same date as the Instance.

For more information about using the Supplementary Events Upsell Block, read the Building Post-Purchase Upsells recipe on the Community.

WARNING: The Pre-Event Liquid Header App Block must always appear first in the email for the Supplementary Events Block to function.

Pre Event Liquid Header

The Pre Event Liquid Header powers the Liquid Script for Pre- and Post-Event emails.

The Pre Event Liquid Header is included by default in the Pre-Event Email Template or can be added to your existing Pre- and Post-Event email campaigns to enable Liquid Script and the preview function.

To learn more about how to add the Pre Event Liquid Header to your Pre or Post-Event Email, read Custom Pre- and Post-Event Emails.

You will need to add a Liquid Script to the top of your email before adding the header.

1. Drag and drop a Liquid Markup block into the top of your email:

   

2. Paste in the following code:

   {% assign spektrix_instance_id = '$INSTANCEID$' %}
    

3. Click Apply:

   

4. Drag and drop the Pre Event Liquid Header App Block directly below the Liquid Markup.

   

Once added to your email, you can click the block and enter an Instance ID to allow you to preview the email for a specific Instance.

Legacy Data Fields (e.g @EVENTNAME@) do not appear in preview. However, they will still function once the email is delivered.

Entering a Test Instance ID will not affect your Pre- and Post-Event Emails when they are delivered.
 

Tickets Block and Seat Summary Block

Using the Tickets Block or the Seat Summary Block you can add your customer's tickets to your existing Pre-Event Email. The Tickets Block can also be found in the Pre-Event Email Template.

As well as the barcode and Pass Links, the Ticket Block can display other information about the customer's ticket such as seat names and Attributes.

To use the Ticket or Seat Summary Blocks in your Pre-Event Emails, you will need to:

• activate Order Syncing between your Spektrix and Dotdigital systems
• set up the Client ID Data Field
• add the Pre Event Liquid Header to the top of the email

REMINDER: The Ticket Block can only be added to a Pre-Event email where the Pre Event Liquid Header block is already configured at the top of the email.

• Tickets Block: The Tickets Block can be configured to display tickets as grouped or ungrouped. In grouped mode, a scannable QR code for each ticket barcode is visible but there is only one set of Add to Wallet buttons for Digital Passes. When ungrouped, each ticket barcode is visible and there is a set of Add to Wallet buttons for Digital Passes per ticket.

• Seat Summary: The Seat Summary Block displays a single card and a scannable QR code which represents every ticket in the customer’s Order. Seat details are summarised, for example, 2 seats M12-13.

• Ticket Block

  To add the Ticket Block to your Pre-Event Email:

  1. Ensure your email includes the Pre/Post Event Header App Block and the Liquid Markup at the top of the email.
  2. In the Dotdigital EasyEditor, under the Build menu, find the Spektrix Pre/Post Event Emails folder.
  3. Drag and drop either the Ticket Block or the Ticket Summary Block into the body of your email. It must sit below the Pre/Post Event Header.
  4. Click into the Block to configure the settings:

     

     • Logo image URL: To add an optional logo at the top of the ticket block, enter the URL of a PNG or JPEG image which is already hosted elsewhere online. This image will be displayed at a maximum of 170 x 80 px. The URL must start with http://.
     • Card background: Enter a hex code to set a colour for the background of the ticket block.
     • Divider colour: Enter a hex code to set the colour of the divider which appears below the optional logo.
     • Text colour: Enter a hex code to set the text colour of the ticket details.
     • Show card border: Set to true to add a border around each ticket.
     • Border colour: If you choose to add a border, enter a hex code to set the colour.
     • Show labels: Set to true to add a label which precedes the ticket information for Venue, Entry, SeatTicket Type and Order ID. Without a label the data will display alone, for example, A2 instead of Seat: A2.
     • Pass links: Choose Grouped (one set of pass links), Ungrouped (Pass links repeated per ticket) or hide pass links.
     • Date format: Delete the default date format from the box to choose a different date format.
     • Time format: Delete the default time format to choose between 12 hour (2:30 PM) or 24 hour (14:30) display.
     • Ticket Content: Check the boxes against each of the pieces of information you want to include. This data is dynamically generated from the data in your Spektrix system :
       • Show QR Code: In the Ticket Block, a scannable QR code will be displayed per ticket.
       • Show Ticket Text 1: Set up an Event Attribute named “Ticket Text 1” to add extra custom information to your ticket block.
       • Show event name: The name of the Event.
       • Show Ticket Text 2: Set up an Event Attribute named “Ticket Text 2” to add extra custom information to your ticket block.
       • Show date and time: The date and time of the Instance.
       • Show venue: The Venue name in Spektrix.
       • Show Seating Plan name: The name of your Seating Plan in Spektrix.
       • Show door text: If you have a Seat Attribute named “Door” this will display the Attribute value.
       • Show Seating Plan area: The Area Name within the Seating Plan for each ticket.
       • Show Seat info: Information applied to the seat using an Info Overlay.
       • Show ticket type: The Ticket Type of each ticket. For example, Adult or Concession.
       • Show ticket price: The price of each ticket.
       • Show order ID: The Order ID for each ticket will be displayed. If the customer has tickets for the same Instance from multiple Orders, each Order ID will display against each ticket.
     • Ticket Divider (Ticket Block only): Choose Show to add a dotted line divider between each ticket.
     • Style content: Click the Style Content button to update the style of the Block. The font size and colour of the text is set in the global style content for the email. Refer to the diagram to understand which style settings apply to different parts of the card.
  5. Click Apply to save your changes.
  6. You can preview the Block by clicking the Preview button from the menu bar at the top. When in preview, click the Personalisation icon and then enter the email address or name of a customer with tickets for the same Instance you have set in the Pre/Post Header as the Test Instance ID.

     

     This will allow you to view the Pre-Event email with ticket information.

• Seat Summary

  To add the Seat Summary to your Pre-Event Email:

  1. Ensure your email includes the Pre/Post Event Header App Block and the Liquid Markup at the top of the email.
  2. In the Dotdigital EasyEditor, under the Build menu, find the Spektrix Pre/Post Event Emails folder.
  3. Drag and drop the Ticket Summary Block into the body of your email. It must sit below the Pre/Post Event Header.
  4. Click into the Block to configure the settings:

     

     • Logo Image URL: To add a logo at the top of the ticket block, enter the URL of a PNG or JPEG image which is already hosted elsewhere online. This image will be displayed at a maximum of 170 x 80 px.
     • Card background: Enter a hex code to set a colour for the background of the block.
     • Divider colour: Enter a hex code to set the colour of the divider which appears below the optional logo.
     • Field text colour: Enter a hex code to set the text colour for the event and seat details.
     • Show card border: Set to true to add a border around each ticket.
     • Border Colour: Enter a hex code to set a colour for the border.
     • Show labels: Set to true to add a label which precedes the ticket information for Venue, Entry, Seat and Ticket Type. Without a label the data will display alone, for example, A2 instead of Seat: A2.
     • Date format: Delete the default date format from the box to choose a different date format.
     • Time format: Delete the default time format to choose between 12 hour (2:30 PM) or 24 hour (14:30) display.
     • Seat Summary Content: Check the boxes against each of the pieces of information you want to include. This data is dynamically generated from the data in your Spektrix system:
       • Show Ticket Text 1: Set up an Event Attribute named “Ticket Text 1” to add extra custom information to your ticket block.
       • Show event name: The name of the Event.
       • Show Ticket Text 2: Set up an Event Attribute named “Ticket Text 2” to add extra custom information to your ticket block.
       • Show date and time: The date and time of the Instance.
       • Show venue: The Venue name in Spektrix.
       • Show Seating Plan name: The name of your Seating Plan in Spektrix.
       • Show door text: If you have a Seat Attribute named “Door” this will display the Attribute value.
       • Show Seating Plan area: The Area Name within the Seating Plan for each ticket.
       • Show Seat Ranges: Display Seat Names as a group. For example, “2 seats: M14-15”.
       • Show Seat info: Information applied to the seats using an Info Overlay.
       • Show ticket type: The Ticket Type of each ticket. For example, Adult or Concession.
       • Show ticket price: The price of each ticket including commission.
     • Ticket Divider (Ticket Block only): Choose Show to add a dotted line divider between each ticket.
     • Style content: Click the Style Content button to update the style of the Block. The font size and colour of the text is set in the global style content for the email. Refer to the diagram to understand which style settings apply to different parts of the card.
  5. Click Apply to save your changes.
  6. You can preview the Block by clicking the Preview button from the menu bar at the top. When in preview, click the Personalisation icon and then enter the email address or name of a customer with tickets for the same Instance you have set in the Pre/Post Header as the Test Instance ID.

     

Membership Sales Header

The Membership Header powers Liquid Script so that you can include Membership information from Spektrix in your Dotdigital emails.

The Membership Header is included by default in the Membership Sale Email Template or can be used to create your own Membership email.

To add the Member Sales Header to your email, drag and drop the block and place it at the top of your email above any other content:

You’ll then be prompted to configure the Header block to define the number of days after a customer purchases a Membership that you want them to receive the email. This value must match the number of days you use in the segmentation of your Customer List Schedule to find customers who purchased a Membership within the period.

To email customers who bought a Membership yesterday, enter 1 in the Membership sold days ago field:

REMINDER: The Membership Header must remain at the top of your email for Membership information from Spektrix to display in your email.

Membership Card

The Membership Card block can be added to emails anywhere below the Membership Header block.

To use the Membership Sale Card Block in your email, you will need to:

• activate Order Syncing between your Spektrix and Dotdigital systems
• set up the Client ID Data Field to be able to add wallet buttons
• add the Membership Header to the top of the email

The Membership Card can be configured to display a QR code which represents the Customer’s ID and Digital Customer Pass download links. It can also display other information about the Membership such as start date, expiry date and whether or not the Membership is set to Auto-Renew.

If you do not want to display the Membership Sale Card, you can include the Digital Customer Pass download links without the card using the Membership Wallet Buttons block.

To add the Membership Sale Card to your email:

1. In the Dotdigital EasyEditor, under the Build menu, find the Spektrix Membership Emails folder.
2. Drag and drop the Membership Sale Card Block into the body of your email. It must sit below the Membership Header.

3. Click into the Block to configure the settings: 

    

   

    

   • Logo image URL: To add an optional logo to the top of the Membership card, enter the URL of a PNG or JPEG image which is already hosted elsewhere online. This image will be displayed at a maximum of 170 x 80 px. The URL must start with https://
   • Card background: Enter a hex code to set the card’s background colour.
   • Divider colour: Enter a hex code to set a colour for the divider which appears below the optional logo.
   • Label colour: Enter a hex code to set the colour of labels such as Start date and Price.
   • Field text colour: Enter a hex code to set the colour of fields such as customer name, dates, price and auto-renew value.
   • Show card border: Set to true to add a border around the Membership Card block.
   • Border colour: Enter a hex code to set a colour for the border.
   • Date format: Delete the default date format from the box to choose a different date format.
   • Time format: Delete the default time format to choose between 12 hour (2:30 PM) or 24 hour (14:30) display.
   • Card content: Check the boxes against each of the pieces of information you want to include. This data is dynamically generated from the date in your Spektrix system.
     • Customer name:  include the customer’s name on the card.
     • Start Date: display the start date of the Membership.
     • Expiry Date: display the expiry date of the Membership. If the Membership does not expire, the field shows Open Ended Membership.
     • Price: display the price of the Membership including donation portion. A price of zero is displayed as Free.
     • Auto-Renew: if the Membership is set to auto-renew this will display as Active in the Auto-Renew field on the card.
     • QR Code: display the Customer ID as a scannable QR code.
     • Wallet Buttons: if you have Customer Passes set up for Memberships, display the Apple and Google add to wallet buttons. To set up Customer Passes, follow the steps in Digital Customer Passes for Membership Purchases.

   TIP: If you do not wish to display the Apple and Google Wallet buttons within the Membership card, you can place them anywhere in the email below the Membership Header using the Membership Wallet Buttons Custom Building Block. If you set the wallet buttons to display both on the card and below the card, the buttons will appear twice.

4. Click Apply to save your changes. 

   TIP: You can preview the Membership Card Block within your email by clicking the Preview button from the menu bar at the top. When in preview, click the Personalisation icon and then enter the email address or name of a customer that has purchased a Membership within the time period specified within your Membership Header.

Membership Wallet Buttons

The Membership Wallet Buttons Block can be used to add Digital Customer Pass download buttons to your email.

To use the Membership Sale Card Block in your email, you will need to:

• activate Order Syncing between your Spektrix and Dotdigital systems
• set up the Client ID Data Field
• add the Membership Header to the top of the email

To set up Customer Passes, follow the steps in Digital Customer Passes for Membership Purchases.

To add the Membership Wallet Buttons to your email:

1. In the Easyeditor, under the Build menu, find the Spektrix Membership folder.

2. Drag and drop the Member Wallet Buttons block into the body of your email anywhere below the Membership Sale Header block. 

    

   

    

3. Click Apply.

Once added to your email, this block will automatically display buttons which allow the customer to add the Membership pass to their Apple Wallet or Google Wallet.

Donation Header

The Donation Header powers the Liquid Script for Donation Acknowledgement emails.

The Donation Header connects your email to the customer's donation data from Spektrix, enabling you to display personalised donation information such as the donation amount, fund name and tribute. 

To use the Donation Header in your Donation Acknowledgement Emails, you will need to activate Order Syncing between your Spektrix and Dotdigital systems .

To add the Donation Header to your email, drag and drop the block and place it at the top of your email above any other content:

You’ll then be prompted to configure the Header block to define the number of days to define which Donations should be included in the email. This value must match the number of days you use in the segmentation of your Customer List to find customers who purchased a Donation within the same time period.

To email customers who made a Donation yesterday, enter 1 in the  Days since Donation box:

REMINDER: The Donation Header must remain at the top of your email for Donation information from Spektrix to display in your email.

Donation Summary

The Donation Summary block can be added to emails anywhere below the Membership Header block and can be configured to display  the receipt number, Fund name, Acknowledgement and Confirmation Text.  

To add the Donation Receipt to your email:

1. In the Dotdigital EasyEditor, under the Build menu, find the  Spektrix Fundraising folder.
    
2. Drag and drop the Donation Summary Block into the body of your email. It must sit below the Membership Header.
    

3. Click into the Block to configure the settings:
    

   

• Background colour: Enter a hex code to set the receipt’s background colour.
   
• Label colour: Enter a hex code to set the colour of labels such as  Fund name.
   
• Body text colour: Enter a hex code to set the colour of the body text.
   
• Border colour: Enter a hex code to set the colour of the border.
   
• Card content: Check the boxes against each of the pieces of information you want to include. This data is dynamically generated from your Spektrix system.
   
  • Receipt number:  include a receipt number in the receipt.
  • Fund name: display the Fund name of the Donation.
  • Sequence ID: display the Donation Sequence ID.
  • Acknowledgement: display the Donation Recognition if present.
  • Confirmation text: if you use the Confirmation Text Fund Attribute, you can use the value to display a custom message here.
     
• Style content: Click the Style Content button to update the style of the Block. The font size and colour of the text is set in the global style content for the email. Refer to the diagram to understand which style settings apply to different parts of the card. 

Once you have finished, click Apply to save your changes.
 

TIP: You can preview the Donation Receipt within your email by clicking the Preview button from the menu bar at the top. When in preview, click the Personalisation icon and then enter the email address or name of a customer that has made a Donation within the time period specified within your Donation Acknowledgement Header.