Skip to main content

How to Change the Widget Style

You can fully customize the look of your XTIX “Purchase Ticket” button to match your website’s design. Here’s how to do it.

Galina Andreeva avatar
Written by Galina Andreeva
Updated this week

Step 1: Inspect the Button

To check the current style:

  • Open your website

  • Press Ctrl + Shift + I (Windows) or Cmd + Opt + I (Mac)

  • Find the button element (e.g. btn-widget, tc-widget-button, etc.)

This will show you the button’s class and styling attributes.

Step 2: Customize the Style

To change the button’s appearance, you’ll need admin access to your website’s code or CMS.

Here’s a basic example of a custom button style:

<button class="btn-widget" style=" background-color: #FFD900; color: black; text-shadow: #f2f2f2 0 -1px 1px; font: bold 22px/41px 'PT Sans', Trebuchet, Helvetica, Arial, sans-serif; padding: 0 13px; text-align: center; text-transform: lowercase; border: 0; border-radius: 4px; box-shadow: rgba(0, 0, 0, 0.75) 0 1px 1px; appearance: button; cursor: pointer; margin: 0; vertical-align: baseline; " > Purchase ticket </button>

You can also create your own class and apply it to the button.

Floating Button Option

Want the button to stay visible as users scroll? Use the floating style:

button[data-tc-round] { width: 110px; height: 110px; border-radius: 50%; border: 3px solid transparent; margin: 8px; font: bold 16px/16px 'PT Sans', Trebuchet, Helvetica, Arial, sans-serif; position: fixed; z-index: 111111; box-shadow: 0 0 0 5px #FFFFFF inset; cursor: pointer; }

You can also style the image and text inside the button.

Button Attributes

Here are some useful attributes you can use:

  • data-xtix-event – Your XTIX event ID

  • data-xtix-token – Your access token

  • data-xtix-round – Makes the button float

  • xtix-position-bottom – Places the button at the bottom of the page

  • data-xtix-meta – For recurring events (optional)

Color Examples

You can use any color, but here are a few popular options:

Background Color

Text Shadow

#FFD900

#f2f2f2

#f77100

#ab4e00

#CB000D

#7f0008

#808080

#5a5a5a

#97b700

#4a6b00

Gradient Button Example

Want a more advanced look? Try a gradient button:

<a href="#" class="button10">Buy Ticket</a> <style> a.button10 { display: inline-block; color: black; font-size: 125%; font-weight: 700; text-decoration: none; padding: .25em .5em; border: 1px solid rgb(250,172,17); border-radius: 7px; background: rgb(255,212,3) linear-gradient(rgb(255,212,3), rgb(248,157,23)); box-shadow: inset 0 0 0 60px rgba(255,255,0,0); transition: box-shadow .2s, border-color .2s; } a.button10:hover { box-shadow: inset 0 0 0 60px rgba(255,255,0,.5); } a.button10:active { border-color: rgba(177,159,0,1); box-shadow: inset 0 0 0 60px rgba(255,255,0,.45); } </style>

Replace the href="#" with your XTIX widget code:

data-tc-event="YOUR_EVENT_ID" data-tc-token="YOUR_ACCESS_TOKEN"

💡 You can also use online tools like an HTML Button Generator to design your button. Just remove the default href and add your XTIX attributes.

Need Help?

If you’re not sure how to apply styles or find your event ID/token, feel free to reach out – we’re happy to help!

Did this answer your question?