Skip to main content

How to Create a Custom Button from an Image

Want to use your own image as a Purchase Ticket button? No problem! Here’s how to turn any image into a clickable button that opens the XTIX widget.

Galina Andreeva avatar
Written by Galina Andreeva
Updated over 3 months ago

Step 1: Use the Button Code Template

Start with this code:

<img style="cursor: pointer;" alt="" src="YOUR_IMAGE_URL_HERE" data-tc-event="EVENT_ID" data-tc-token="TOKEN">

Replace:

  • YOUR_IMAGE_URL_HERE with the link to your image

  • EVENT_ID with your event’s ID

  • TOKEN with your widget token

Step 2: Add the Button to Your Website

Paste the code into your website’s admin panel where you want the button to appear.

💡 You can use this on any page, blog, or HTML block.

Step 3: Add the Widget Script

Place this script before the closing </body> tag on your page:

<script src="<https://xtix.ai/static/scripts/widget/tcwidget.js>"></script>

✅ Only one script is needed per page, even if you have multiple buttons.

Optional: Position the Button

Want to control where the image appears? Use this version:

<img style="cursor: pointer; position: absolute; bottom: 400px; left: 380px;" alt="" src="YOUR_IMAGE_URL_HERE" data-tc-event="EVENT_ID" data-tc-token="TOKEN">

Adjust the bottom and left values to place the button exactly where you want it.

That’s it! Your custom image button is now live and ready to sell tickets.

Need help finding your event ID or token? Just reach out – we’re happy to help!

Did this answer your question?