Adding a single event widget to your site

The single event widget offers a flexible way to showcase event details on your website. In this guide, we'll explore the various configuration options available when setting up a single event widget.

To access the ticket widget generator follow these steps: 

  • Log in to your Purplepass event organizer dashboard
  • Select Tools from the top navigation bar
tools-1.jpg
  • Select the Ticket Widget option

ticket widget tool.jpeg

When setting up a single event widget, you have the option to choose which parts of the event page you want to display. These include:

  • Event Header: Contains essential event information such as event photo, name, date, time, location, pricing options, and seating map.
  • Event Details: Provide additional details about the event, including start and end dates, door opening times, event type, and category.
  • Description: Displays the event organizer's description of the event.
  • Images and Videos: Showcases event photos and videos uploaded by the organizer. If nothing is uploaded, nothing will appear. 
  • Map: Displays an interactive map of the event venue.

widget-settings.jpg

You can customize which elements to include or exclude based on your preferences. 

Selecting Multiple Events

When only one event is selected, all page elements are available for display. However, if multiple events are selected or set to show all events, the widget will automatically switch to a dropdown event selector mode, showing only the pricing section to streamline the user experience. Pricing is required. 

creating-single-widget-dropdown.jpg

Advanced Configuration:

  • Tracking ID: Allows you to track sales originating from different sources by assigning a unique tracking ID to each widget. This is helpful when adding widgets to different part of your website; having all the sales through that widget be tagged with the SID for stats and reporting. 
  • Appearance: Customize the widget's theme colors, primary color, and border thickness. Primary color is mostly used for the buttons. You can use custom to create your own color. 

tracking-ID-and-colors-on-widget.jpg

setting colors of ticket widget.gif

  • Shopping Cart: Choose whether to enable a shopping cart feature for added convenience during ticket purchase. This will show an alert asking the customer if they would like to continue shopping or check out. 
    • Turn on shopping cart: For default behavior, they have the option to continue shopping and will take them back to their last page after adding to their cart. This is useful for clients with multiple events that have separate pages on their website; each page having their own widget 
    • Turn off shopping cart: When a customer selects tickets and adds them to cart, they will automatically be taken to the cart.
  • Custom URL: Set a custom URL for redirecting users when they click on Continue Shopping. Here you can control the navigation throughout the customer buying experience. 

shopping-cart-and-redirect.jpg

  • Maximum Width and Height: Control the maximum width and height of the widget to fit your website layout. This is not necessarily the width, but the maximum allowed width. For example, if you set the width to 800 pixels, the widget can never get larger than that to make sure the layout stays consistent. The Auto setting is recommended. Maximum height should almost always be set to Auto.

maxium-width-widget-code.jpg

  • Widget Border: Adjust the thickness and color of the widget border for visual enhancement.
  • Event Banner Display Options: Choose to show or hide the event banner within the widget and select its display mode (stretch or no stretch). The event banner is a large image that is above the description and below the hero. Depending on where that widget is being displayed on the website, you might want to remove the banner. 
    • Use event settings (recommended)
    • Don't stretch to fill the screen
    • Stretch to fill the screen
    • Hide event banner

event-banner-widget.jpg

hide banner on ticket widget.gif

  • Streamline Hero: Opt for a streamlined header with reduced information for a sleeker look. By default, it is the normal size. 

streamlined-hero-options.jpg

  • Hide Ticket Descriptions: Hide ticket descriptions to simplify the purchasing process, especially on mobile devices. If you have an event with long descriptions, you can choose to hide that to prevent it as a simple option. 
  • Display Mode: Choose between a floating panel or inline display mode based on your website's design and user experience preferences.
    • Floating: The cart will appear floating over the website. This provides a better user-experience. 
    • Inline: The cart will load within the space of the widget, so the buying experience will be contained within the widget box. 

By understanding and leveraging the configuration options available for single event widgets, you can tailor the widget to meet your specific needs and create a seamless event browsing and ticket purchasing experience for your audience.

For steps on embedding your ticket widgets, click here.