Safary Documentation
  • For engineers
    • Getting started
      • Create or join a project
      • Add websites
      • Install Safary script (hosted)
      • Install Safary script (self hosted)
      • Install Safary script with Google Tag Manager
      • Setup events
      • Upload wallets
    • Integrations
      • Magic Link
    • Safary API
    • Custom domains
  • For marketers
    • Tutorials for web3 marketers
    • Pricing
      • Safary basic plan
      • Safary pro plan
    • Launch campaigns
      • UTM builder with Safary links
      • UTM builder with custom domains
      • Ad Networks
      • Quests
      • Farcaster Frames
    • Account settings
    • Privacy
      • Privacy policy
      • Disable Location Tracking
Powered by GitBook
On this page
  • Table of Contents
  • How to integrate your website with Safary script (hosted version)
  • OPTIONAL - If your site has a Content Security Policy (CSP)
  1. For engineers
  2. Getting started

Install Safary script (hosted)

Safary script guarantees privacy and security in Web3.

PreviousAdd websitesNextInstall Safary script (self hosted)

Last updated 1 year ago

Table of Contents


How to integrate your website with Safary script (hosted version)

To integrate your website with Safary, you need to update the front-end (HTML code) of the website you want to track.

  1. First, once you have signed up, go to your Safary's home page (). Under "Integrate Safary snippet" if you click on Hosted Tag, you should see something like:

  2. Now click on the copy icon on the left of the code to copy the contents of the tracking script

  3. Go to your front-end's HTML code, and simply paste (CTRL+V or CMD+V) the script's code within the <head> … </head> tags of the pages you want to have tracking enabled.

    • For example, we suggest adding at least to both your landing page and your "app" page, which would have a "connect wallet" functionality.

That's it. Your Safary tracking script code will look something like this in your page:

<script>var script=document.createElement('script');script.src="https://tag.safary.club/stag-X.X.X.js";script.async=true;script.setAttribute('data-name','safary-sdk');script.setAttribute('data-product-id','prd_A123456789');script.integrity="sha256-XXXXXXXXXXXXXXXX";script.crossOrigin="anonymous";var target=document.head||document.body;target.appendChild(script);</script>

OPTIONAL - If your site has a Content Security Policy (CSP)

If your site has Content Security Policy (CSP) enabled, you need to add the hash of the code above.

    • "If you have a Content Security Policy (CSP) in your service - optional"

  1. Click on that title to expand it, and you will see something like:

  2. Finally, you need to add the directives in the place you implement CSP, which can vary.

    1. For example, if you use Node.js with the Helmet package in your backend to setup CSP, the code above is exactly the one to be pasted in your backend.

    2. On the other hand, if your CSP is setup using a <meta> tag in the front-end to include the policy, you can still use the hash in the <meta> tag. For example, using the above:

      • <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'tag.safary.club' connect-src 'self' 'tag.safary.club'">

In Safary's home page (), you will see under "Integrate Safary snippet", a small section with the title:

Now you can click on the copy icon on the left to copy the contents of the policy.

https://app.safary.club/
https://app.safary.club/
How to integrate your website with Safary script (hosted version)
(Optional) If your site has a Content Security Policy (CSP)
Example of Safary's home page with the tracking script code
Example of Safary's home page with the content security policy (CSP) for the tracking script