Advanced

Please use the following instructions only if the copy-and-paste embed code above is incompatible with your site.

Sample:

https://codepen.io/kunalwithfriends/pen/wvGZKMJ

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:

Click Share Online and then Add to my website > Copy link to add a membership button to your website. For example:

<a href="http://withfriends.co/hypnotic_records/join?utm_campaign=wf-websitelink">Memberships</a>

Then, here’s the code.

$("{ElementSelector}").withfriends("%WITHFRIENDS_ID%", {Replace_Element: false, Memberships: true});

So here's your total installation:

<a href="http://withfriends.co/hypnotic_records/join?utm_campaign=wf-websitelink">Memberships<a/>

<script>
  $(function(){
    $('a[href*="/withfriends.co/"]').withfriends("hypnotic_records", {Replace_Element: false, Memberships: true});
  });
</script>

Now when someone clicks the button, we'll lead them 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.

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 > Utilities

> Website Tools > Code Injection

Add both jQuery and Withfriends scripts.

You can copy it from here!

<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"></script>

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.

This is the edit view of the Withfriends.events Memberships Demo Page.

Click edit on the Embedded Scripts block (if added, otherwise Add Code Block).

Copy in the following code, but make sure to edit the variables:

Memberships > Your button Name
the_plant_room > Your organizer account i.e. withfriends.co/organizer_name

<script>
  $(function(){
    $('a:contains("Memberships")').withfriends("the_plant_room", {Replace_Element: false, Memberships: true});
  });
</script>

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);
  Withfriends.Initialize_jQuery()

  // Use embed
  Withfriends.jQueryVar(function(){
    Withfriends.jQueryVar('a[href*="/withfriends.co/"]')
     .withfriends("hypnotic_records", {Replace_Element: false, Memberships: true});
  });
</script>

Recommended: