Support Center


Premiere: Embedding the Ticketsocket widget on your non-Ticketsocket site

Standard Set-up

We can embed an event's ticketing flow onto a non-TS site by utilizing the Ticketsocket widget. To do this, you will want to copy the following code, adjust the red values, and paste it where you want the widget to appear.

    .ticketSocketEmbedForm .singleTicketType
        border: 2px solid #3a3a3a;
        border-radius: 12px;
        padding: 8px;

    .ticketSocketEmbedForm .singleTicketType .topRow .ticketTypeName .name,
    .ticketSocketEmbedForm .singleTicketType .topRow .ticketTypeName .ticketTypePrice
        font-size: 1.2em;
        line-height: 28px;

    .ticketSocketEmbedForm .singleTicketType .topRow select
        border-radius: 3px;

    .ticketSocketEmbedForm .submitRow input
        border: 1px solid #ed4815;
        border-radius: 3px;
        padding: 8px 12px 8px 12px;
        text-align: center;
        font-weight: bold;
        background: #ef5528;
        color: white;
        cursor: pointer;

    .ticketSocketEmbedForm .submitRow input:hover
        background: #ed4815;
<script src=""></script>
<link rel="stylesheet" href="" />
    tsEmbed = new TicketSocketEmbed();
        domain: "YOUR_TS_DOMAIN",
      eventId: "###",
        buttonText: "Checkout"
<div id="ticketSocketEmbedContainer"></div>

In this minimal set-up, we will just need to set 3 things: the domain that the widget pulls the event from, the eventId assigned to that event, and what text you want on the button that sends them to checkout.

How to find an eventId

The best way to find the eventId of a Ticketsocket event is to check the event's URL from the Ticketsocket backend. Navigate to your Ticketsocket admin and select the event you would like to embed. This will take you to the Edit Event menus. Notice the URL:

The end of the event's URL, when editing it, will show a number. That number is the eventId. So when you are editing the tsEmbed.init( portion of the code above you will only place that number, the eventId, within the quotation marks.

Additional Widget Properties

Additional parameters can be added to the tsEmbed.init() portion of the code:

Parameters Further explanation
currencySymbol: "&euro;", The expected value for currencySymbol is an HTML entity. More HTML entities can be found here.
quantityText: "How Many", The expected value of this parameter is a string.
showDetailsText: "Show More", The expected value of this parameter is a string.
hideDetailsText: "Hide Info" The expected value of this parameter is a string.
affiliate: "testaffiliate" The expected value of the parameter is what was entered as the affiliate's Affiliate URL value, found when editing an affiliate.





Please sign in to leave a comment.