Skip to main content

Displaying Contracts on your website

Ariana Kemp
  • Updated

So now that you've published a Contract, you're probably wondering how to get your Contract in front of your Signers. This article will help you take that final step to get your Contract visible to the world.

 

This is a sign-in form that includes links to Contracts — Privacy Policy and Law Firm Terms of Service — at the bottom:

 

1.jpeg


The key to getting a Contract on a website is to use a Group. A Group in PactSafe is a set of Contracts you present together to users on your website. Using Groups, you can add one or many Contracts and choose how those agreements will be presented for your customers to accept. You can setup a clickwrap or a browsewrap and, from there, set up how the Group will look.

 

There are only a few steps to get started using the most seamless contract management solution available.

 

  1. Choose the Groups icon from the navigation menu on the left. Then click the + icon in the lower right corner to create a Group.

  2. Add Contracts to the Group.
    Tip: Make sure that the Contracts you add have already been published. If you add an unpublished Contract to the Group, users won't be able to see it. 

  3. Save and Publish the Group.

  4. Copy and paste the snippet into your website or app.
    Grab the code snippet and add it to your website or app (more on this below). You use the same snippet for any Group, and you identify which Group you want to embed by referring to it by its Key value. 

The Global PactSafe snippet to your website

To get your account properly set up, you must first add the PactSafe snippet to your website (at a minimum on the pages you’d like to track). All you have to do is copy and paste the code below and replace XXXX-XXXXXXXXX with your own Site Access ID, which you can find here.

 

// Minified PactSafe Snippet
(function(w,d,s,c,f,n,t,g,a,b,l){w['PactSafeObject']=n;w[n]=w[n]||function(){(w[n].q=w[n].q||[]).push(arguments)},w[n].on=function(){(w[n].e=w[n].e||[]).push(arguments)},w[n].once=function(){(w[n].eo=w[n].eo||[]).push(arguments)},w[n].off=function(){(w[n].o=w[n].o||[]).push(arguments)},w[n].t=1*new Date(),w[n].l=0;a=d.createElement(s);b=d.getElementsByTagName(s)[0];a.async=1;a.src=c;a.onload=a.onreadystatechange=function(){w[n].l=1};a.onerror=a.onabort=function(){w[n].l=0};b.parentNode.insertBefore(a,b);setTimeout(function(){if(!w[n].l&&!w[n].loaded){w[n].error=1;a=d.createElement(s);a.async=1;a.src=f;a.onload=a.onreadystatechange=function(){w[n].l=1};a.onerror=a.onabort=function(){w[n].l=0};b.parentNode.insertBefore(a,b);l=function(u,e){try{e=d.createElement('img');e.src='https://d3r8bdci515tjv.cloudfront.net/error.gif?t='+w[n].t+'&u='+encodeURIComponent(u);d.getElementsByTagName('body')[0].appendChild(e)}catch(x){}};l(c);setTimeout(function(){if(!w[n].l&&!w[n].loaded){w[n].error=1;if(g&&'function'==typeof g){g.call(this);}l(f)}},t)}},t)})(window,document,'script','https://vault.pactsafe.io/ps.min.js','https://d3l1mqnl5xpsuc.cloudfront.net/ps.min.js','_ps',4000);

Now, you simply load your Group within the same page:

 

_ps('load', 'click-through-agreement');

If you’re loading our Contracts (and checkboxes) onto your page, you’ll need to also make sure you have created the <div> for your Contracts to be loaded into like so:

 

// Minified PactSafe Snippet
(function(w,d,s,c,f,n,t,g,a,b,l){w['PactSafeObject']=n;w[n]=w[n]||function(){(w[n].q=w[n].q||[]).push(arguments)},w[n].on=function(){(w[n].e=w[n].e||[]).push(arguments)},w[n].once=function(){(w[n].eo=w[n].eo||[]).push(arguments)},w[n].off=function(){(w[n].o=w[n].o||[]).push(arguments)},w[n].t=1*new Date(),w[n].l=0;a=d.createElement(s);b=d.getElementsByTagName(s)[0];a.async=1;a.src=c;a.onload=a.onreadystatechange=function(){w[n].l=1};a.onerror=a.onabort=function(){w[n].l=0};b.parentNode.insertBefore(a,b);setTimeout(function(){if(!w[n].l&&!w[n].loaded){w[n].error=1;a=d.createElement(s);a.async=1;a.src=f;a.onload=a.onreadystatechange=function(){w[n].l=1};a.onerror=a.onabort=function(){w[n].l=0};b.parentNode.insertBefore(a,b);l=function(u,e){try{e=d.createElement('img');e.src='https://d3r8bdci515tjv.cloudfront.net/error.gif?t='+w[n].t+'&u='+encodeURIComponent(u);d.getElementsByTagName('body')[0].appendChild(e)}catch(x){}};l(c);setTimeout(function(){if(!w[n].l&&!w[n].loaded){w[n].error=1;if(g&&'function'==typeof g){g.call(this);}l(f)}},t)}},t)})(window,document,'script','https://vault.pactsafe.io/ps.min.js','https://d3l1mqnl5xpsuc.cloudfront.net/ps.min.js','_ps',4000);

_ps('create', 'XXXX-XXXXXXXX');
_ps('load', 'click-through-agreement');


<-- my page content -->
<div id="click-through-agreement"></div>

Notice we’re using the Agreements Container Selector to load our Contracts onto the page.

 

Note: To learn how to customize the flow of your legal Contract acceptance, check out our Developer Guide for the PactSafe Javascript Library.

 

Wow! You should be up and running. Now you've saved yourself a bunch of time whenever you want to update your Contracts or see who agreed to what. Awesome.  

 

If everything didn't go to plan, though, we've got your back. Just open a chat or email us at help@pactsafe.com and we'll get you hooked up.

 



Related articles