Installing Usersnap using NPM

NPM, a widely-used package manager in the web development field, allows for easy sharing and reuse of code, as well as efficient management of project dependencies. The Usersnap package, available on NPM, simplifies the process of integrating the Usersnap snippet into single-page application (SPA) projects.
Installing the Usersnap snippet code in single-page application (SPA) projects is now as easy as running a single command, thanks to this package.

Let's take a look at how we can use it.

How to Install

To install the package, use the command below based on your preferred package manager:

npm install @usersnap/browser

or

yarn add @usersnap/browser

After installing the package, you can start setting up the Usersnap widget like this:

import { loadSpace } from '@usersnap/browser'

const spaceApiKey = '<YOUR_SPACE_API_KEY>'

loadSpace(spaceApiKey).then((api) => {
  api.init()
})

Here, we start by importing the loadSpace method from the @usersnap/browser package, which you have installed in your project using NPM or Yarn.

Then we define a variable spaceApiKey and assign it a string that should be replaced with a valid Space API key. Your Space API key should be available in the "Publish" page of your project. You can navigate to Configure -> Publish to copy your Space API key:

The loadSpace function is called with the spaceApiKey as its argument and returns a promise which when resolved, returns an object. The init method is then called to initialize Usersnap.

This is our recommended way if you want to fully utilize targeting options configuration.

📘

Inline Form Implementation

You can check out our Inline form installation guide if you want to use Usersnap widgets as part of your website's layout.