How to Embed the Tito widget in your Squarespace website
Increasingly, small to medium businesses are opting for website builders and hosted solutions like Squarespace to create sites on the fly.
According to a usage statistics and market share report from w3techs.com:
Squarespace is used by 2.7% of all the websites whose content management system we know. This is 1.5% of all websites.
1.5% may not sound like much, but we’re talking about millions of sites. Squarespace is the 5th most used content management system (CMS), behind WordPress (which has the largest market share by far at 60.2% of sites with a CMS), Joomla, Drupal and Shopify.
In today’s blog post and accompanying video tutorial, we’re going to show you how to embed the Tito widget in your Squarespace website. But you can use these techniques to embed the widget in most websites. You just need to have access to the codebase including the <head> tag, but you don’t really need to know how to code.
Watch now to find out how, and scroll down for a written explanation:
Instructions for embedding the Tito widget in your Squarespace site
Log in to your Squarespace site and click on Settings in the left-hand sidebar, then on Advanced, and finally on Code Injection. This is a premium feature, so you’ll need you need a business or commerce account with Squarespace for this to work.
Step 1 is to inject the following line of code into your head tag:
<script src='https://js.tito.io/v1' async></script>Optionally, if you’d like your widget to look like the one in our documentation, you’ll also need to paste in the link to our CSS stylesheet:
<link rel="stylesheet" type="text/css" href='https://css.tito.io/v1.1' />
Alternatively you can add your own custom styles if you or someone in your team is comfortable writing CSS.
Hit Save and then navigate to the page or section where you want to embed the widget itself.
Click to Edit this section, then click on the plus icon to insert a new content block. The kind you need is a Code Block, and you can find it under the More heading.
Paste in the following line of code, replacing “ultimateconf/2013” with your event path (this is the last part of your Tito event homepage URL, and is you’re account slug followed by your event slug):
<tito-widget event="ultimateconf/2013"></tito-widget>Hit Apply, then Save on the wider content section, and refresh the page to see your changes.
And that’s it! Your customers can now register tickets for your event, without ever leaving your Squarespace website!
I hope you found this tutorial useful. Got an idea for what we should cover next? Drop me a line at vicky@tito.io.