There are two ways to embed Withfriends tickets on your website.
One is a simple embed code that creates a simple button. The other involves very simple javascript, and creates an embedded checkout experience on your site.
Event ID
Note the Event ID from the link to your ticket page.
The format of a Withtfriends ticket page link is:
https://withfriends.co/event/{EventID}/{EventName}
So if your ticket page link was:
https://withfriends.co/event/101936/kunal_jewellers_grand_opening
Your Event ID is 101936
Option 1: Simple Embed Code
Enter this embed code in your website editor, and Withfriends will create a button that links to your website.
<iframe src="https://withfriends.co/event/{EventID}/embed/raw" width="304" height="64" frameborder="0"></iframe>
<iframe src="https://withfriends.co/event/345734/embed/raw" width="304" height="64" frameborder="0"></iframe>That’s it!
Option 2: Javascript
Sample:
Prerequisites:
You’ll need jQuery to run our Javascript embed option. Install jQuery by including this code on your website, typically inside the head tag.
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
Installation:
To install Withfriends, include this code in your website, typically inside the head tag.
<script type="text/javascript" src="https://withfriends.co/api/withfriends.js"></script>
You’re all set!
Usage:
Here’s the code.
$('#{ElementSelector}').withfriends({EventID}, {Options});e.g.
<div id="Buy_Tickets"></div>
<script>
$(function(){
$("#Buy_Tickets").withfriends(101936, {});
});
</script>
This will replace the div with a designed button that leads into an embedded checkout experience.
You'll notice we wrapped it in the $() function, which allows you to place the script tag anywhere in the document without worrying about order.
Advanced Options:
Popup (default = true)
Set Popup to false, and Withfriends will create a simple direct link to the ticket page on Withfriends, instead of an embedded checkout experience.
e.g.
<div id="Buy_Tickets"></div>
<script>
$(function(){
$('#Buy_Tickets_Button').withfriends(101936, {Popup:false});
});
</script>
Replace_Element (default = true)
Set Replace_Element to false, and Withfriends will leave your element as you designed it, instead of replacing it with a Withfriends button.
e.g.
<button id="Beautiful_Designed_Button">
Buy Tickets
</button>
<script>
$(function(){
$("#Beautiful_Designed_Button").withfriends(101936, {Replace_Element: false});
});
</script>
How to Embed Withfriends on Wordpress
There are a number of robust ways to install the withfriends.js library in Wordpress using plugins like Header & Footer. This is the recommended way to install libraries in Wordpress, though you can just as easily add the library in the code block described in the next paragraph.
Regardless of how you install the withfriends.js library, you'll still need to add a small bit of script to each page with a button that you'd like to turn into and embedded checkout. To do that, you'll need to add script directly to the page - often by adding something called a "Code Module", or similar, depending on your theme - to each page that has a Withfriends event.
Here's an example, but it will vary depending on the specific Wordpress setup you have.
How to Embed Withfriends on Squarespace
Embedding Withfriends checkout into Squarespace typically requires a Business or higher account, because it uses the Code Injection and Code Block features.
First, you'll need to use the Code Injection feature to add withfriends (and jQuery) to your Squarespace site.
Go to Website > Pages > Website Tools > Code Injection
Add both jQuery and Withfriends scripts.
Screenshot of Code Injection
Now, for each button you'd like to turn into an embedded checkout for a particular event, you'll need to add a Code Block on the corresponding page that calls withfriends on the button.
For example, let's look at this GET TICKETS NOW button.
Add a Code Block that calls the scripts above using Add Block > Code Block.
Screenshot of Code Block
<script>
$(function(){
$('a:contains("Tickets")').withfriends(17718353, {Replace_Element: false});
});
</script>
Example code for Code Block
Make sure Display Source is unchecked, and choose HTML as the type.
You can see in the example above, we used a:contains("{button-text}") to point to the button. You should know that this will add the Withfriends checkout to every single button on the page that has has the text Get Tickets Now. If this solution doesn't work for your situation, Squarespace buttons also have ids, and you can use some basic hacking skills to code a more specific selection.
Of course, don't forget to replace the ID with the specific ID for your event.
Once you've set that up, you're all set! Clicking the Get Tickets Now button will load your Withfriends event directly inside of your Squarespace site, allowing ticketbuyers to buy tickets and become members without ever leaving your site.
Troubleshooting
In some cases, your Wordpress/etc plugin is incompatible with our embed. In that case, you can use our "noconflict" version by using our Set_jQuery function.
Here's the code:
<!-- Load libraries --/>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="https://withfriends.co/api/withfriends.js?v=3"></script>
<script>
// Set jQuery up for no coflict
var jq = $.noConflict(true);
Withfriends.Set_jQuery(jq);
// Use embed
jq("#Buy_Tickets").withfriends(101936, {});
</script>
Pro-Tip: Make sure to set the Clickthrough URL on your button directly to your event on https://withfriends.co. This way, if someone has a bad internet connection, the backup plan will still work - checking out on withfriends.co directly.