A guide to the new Billetto ticket widget

Billetto has released an improved ticket widget in order to offer you a better experience when selling tickets on your site/blog.


There are four* types of widgets to choose from: 

Single-button option

A single-button widget allows you to add a button to your website. When a ticket buyer clicks the button, they will trigger a Billetto pop-up window where they will be able to complete the purchase while staying on your website. 


1

You will find the code to put on your website just on the side of the widget preview. This is ideal if you want to have full control over the look of your website but need to add a ticket check-out option to it. This can be found under the Marketing > Ticket Widget section of the ''manage'' page. 

 

Single event widget

Another option is to add a list of tickets available for your event as a widget on your site. This widget is available if you have a standard (not recurring) event on Billetto.

4Just likethe single button widget, you can find the code for the single event widget just next to the widget element in the Marketing > Widget section of the ''manage'' event page. 


Recurring event widget

A recurring event widget is available on your recurring Billetto events. It displays a calendar with the dates available for your event. The ticket buyer then can select the date and the time they wish to purchase the tickets. 
2

You can find the code for the recurring event just next to the widget preview in the Marketing > Widget section of the ''manage'' event page.  


Account widget

An account widget is a great option when you want to show all your events on your website. It is also available in a few different views, such as a calendar, a list, and a button. 
3
You can copy the code just above the widget preview. This widget can be found in the Promote (top navigation) > Widget section. 

Integrating a Custom Button for the Purchase Widget

To align the Purchase Widget seamlessly with the aesthetic of your website, incorporating a custom button is a straightforward process. This allows you to maintain the visual consistency of your site while offering an intuitive and branded ticket purchasing experience. Follow the steps below to implement your personalized button:

 

Embed the Widget Script: Start by embedding the following script into your website's HTML. This script is crucial for the widget's functionality. Ensure to replace .eu with the appropriate country domain for your location:

<script src="https://billetto.co.uk/embed.js"></script>
  1. Create a Custom Link: Utilize an anchor (<a>) tag to create a clickable button. This tag should include the URL directing to our selection page, where the widget will be activated. Below is an example of how to structure the tag:
<a href="https://billetto.co.uk/e/e-738524/select?color=%23459197">Buy Tickets Now</a>
  1. Customize Your Button:
    • Event ID: Personalize the button link by replacing the placeholder next to /e- with your specific event ID. This ensures the widget directs users to the correct event.
    • Color Scheme: Customize the button's color to match your website's theme by altering the hex code in the color query parameter of the URL. This hex code allows for precise color matching, ensuring a cohesive look and feel.

By following these instructions, you can effortlessly integrate a custom button on your website that not only enhances user experience but also maintains the brand consistency of your online presence.

Customise your widget

Colouring: Billetto widgets are now available in light and dark themes, as well as you can change the color of the button and elements. Please note that if you change the colour to something that's unreadable Billetto will automatically swap the colours and default to blue.

Hide Image: Remove the event banner from the widget

White Label: Remove the Billetto branding.

Show Private Events: If you wish to include your private events within your widget selection

Sell directly on your website: (Enabled by default) - When disabled clicking get tickets will take the user to the Event Page on Billetto's website. When enabled, the user will be able to purchase from your website.

Embedding the widget on Squarespace, Wordpress.org or Wordpress.com

Squarespace

To embed the new widget on your Squarespace website:

1. Use the "Embed" element & click the "</>" symbol.
2. Paste the code in the window that pops up & click "Set".
3. Apply the element & publish the changes.

You cannot see the widget on the element preview on Squarespace, so check it on the live page. 

 

Wordpress.org

To embed the widget on the Wordpress.org website:

1. Add a new widget to the section where you would like to add tickets to
2. Choose "Custom HTML" widget type
3. Publish the update to your site. 

 

Wordpress.com

The current widget is not supported by Wordpress.com. This is due to the fact the custom script is not supported by this service. 

If you're using Wordpress.com to host your website/blog, we'd recommend creating a custom button and linking directly to the Billetto ticket purchase page. 

 

Embedding widget in Wix

  • Click the link https://wix.to/qA6B5dv (make sure youre logged into wix)
  • Agree to the consent for Billetto to be installed
  • On your website in Wix click Edit Site
  • Click Add App and Choose Billetto Widget
  • Click Embed Link and add the script/code from Billetto
  • In the Wix Website Builder, resize the widget you want for Desktop
  • Now select the Tablet View on Wix Website Builder, Choose the size you want for Tablet
  • Now select the Mobile View on Wix Website Builder, Choose the size you want for Mobile (We recommend full width)
  • Publish and View the live website

 

Please note at this time Apple Pay doesn't work directly in the widget on other websites. This is due to Apple's Security Policies.

 

Privacy Policy Notices

On your website you may be required to notify the end users of the _billetto_session cookie for legal regulation requirements. Here's an explanation of the cookie:

The _billetto_session cookie is used to store information related to the current session on the Billetto website. This cookie is essential for ensuring that the website functions properly by maintaining session-specific data. When organizers use Billetto's embedded ticket handling flow, the _billetto_session cookie is set to perform the same function, ensuring a seamless and consistent experience across the embedded and main site versions. This cookie helps manage user authentication, session state, and other session-related activities necessary for making a purchase at Billetto.

 

Widget opening blank new tabs?

This is caused by your websites security policies, we recommend updating your:

- Cross-Origin-Opener-Policy

- X-Frame-Options

Please note that this does have affect on your websites security (if you host external content) so review both changes before doing so.

 

In case you have any questions, please contact our customer support team at support@billetto.com