Embedding a Tripleseat Lead Form into your Website – Tripleseat Support

This requires knowledge of HTML and CSS, so please have the person who maintains your website follow this guide.

View a sample embedded form on our demo site.

Inserting the Code

First things first, you need to attain the embed code for your particular Tripleseat account. This can be found in Tripleseat under Settings -> Lead Forms -> Setup Codes.

Example embed code:

<script src="http://api.tripleseat.com/v1/leads/ts_script.js?lead_form_id=2&public_key=DoNotUseThisCodePlease12345" type="text/javascript"></script><a href="http://www.tripleseat.com" id="tripleseat_link">Private Event Software powered by Tripleseat</a>

Once you have the embed code, copy/paste it into the html page where you want the form to show up. Once inserted, try loading the page up to make sure it renders the form correctly. If it does, and everything looks good, that's all there is to it!

If you're having problems getting the form to render, set up a test page with the form on it and submit a support ticket to us with a link to the page so we can take a look.

Styling the Form (Optional)

If you want to change the way it looks to better match your website, you can override any of the default CSS rules. A full list of all the CSS rules that get inserted by the embed code can be seen in roughly the first 50 lines of this file.

So, to override any of these rules, simply copy/paste the rule into your own css file, make its precedence higher by putting "body" or "html" in front of the rule, and, finally, change the properties of the rule as you please.

Example to override the first line in the file to have 10px padding:

body #tripleseat_embed_form table td { padding:10px; }

Mobile Friendly Layout

For maximum customization of our lead form that can utilize a mobile-friendly interface, use our non-tabular layout option. The markup for this form uses <div>'s that are floated instead of a <table>. This layout can be made mobile-friendly quite easily. To enable this style, simply add the following parameter to the URL in your embed <script>'s src attribute:

&inline_form=true

Custom Javascript Hooks

We have two custom javascript hooks you can use to customize what occurs after a lead is submitted or if an error occurs. This would be added between a <script> and </script> tags. Examples as follows:

TS.custom_success_callback = function(success_message, lead_id) { 
 // view the success message
 // redirect to a custom url
 window.location = 'http://tripleseat.com';

  // lead_id is the id of the created lead
  // it can be used for custom tracking/analytics
  record_new_lead(lead_id);
}

TS.custom_errors_callback = function(errors) { 
     $ts.each(errors, function(field, error) {
         alert(field + ': ' + error);
     });
}

That's all there is to it. If you have any questions or need help, please contact support and we'll gladly assist you!

The <IFrame> Route

Sometimes embedding our form directly into a page on your website can cause issues with jQuery or CSS overlapping. If this is the case, a simple workaround is to add basic .html file onto your server with our embedded <script>. Click here for a sample basic HTML file (right-click and "save as"). Once you have this file in place, simply put your Tripleseat embed <script> tag in the <body> of the html file.

Next, you'll need to place an <iframe> tag where you want the form to show up.

<iframe src="tripleseat_form.html" height="" width="100%" />

Do note the width and height attributes will probably need to be tweaked based on your site's layout. Any additional CSS stylings can be placed in a <style> tag in "tripleseat_form.html" or you can include a completely separate .css file.

Adwords or Analytics Tracking

Tracking Adwords campaigns or other analytics after a successful lead submission can be done in a few ways. First, and probably easiest, use the TS.custom_success_callback javascript method mentioned above to redirect to a "thank you" page site on your that contains the Adwords completion code. Second, use the TS.custom_success_callback to directly execute javascript code that completes the analytics transaction.

Tracking by Lead Source

Tripleseat allows you to use custom lead sources for a variety of uses. It can be used to track leads from Google (or other search engines and sources). In order do this, first create the desired lead sources in the app under settings -> preferences. Next, find your "lead sources" list, which can be found in the app under settings -> API, to find the ID(s) of all applicable lead sources. Lastly, on the page with your embedded form, use javascript to insert a hidden field into the Tripleseat embedded lead form's <form> tag with the ID value of the desired lead source. See example:

if ( lead_source_condition ) { // if the lead source condition applies...
 $ts('#tripleseat_embed_form').append("<input type='hidden' id='lead_lead_source_id' name='lead[selected_lead_sources_attributes][0][lead_source_id]' value='{proper lead source ID here}' />")
}

Related articles