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.

<style>
    .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;
    }
</style>
<script src="https://d19cc29qsd5ddg.cloudfront.net/widget/add-to-cart/v1/ts-add-to-cart-embed.js"></script>
<link rel="stylesheet" href="https://d19cc29qsd5ddg.cloudfront.net/widget/add-to-cart/v1/ts-add-to-cart-embed.css" />
<script>
    tsEmbed = new TicketSocketEmbed();
    tsEmbed.init({
        domain: "YOUR_TS_DOMAIN",
        eventId: "###",
        buttonText: "Checkout"
    });
</script>
<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:

https://YOUR.TS-DOMAIN.com/admin/plugs/eventManager/edit/general/###

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:

    
    
    
    
});