Installing Usersnap using NPM (Inline Form)

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.

In this guide, we will walk you through the inline form installation process of Usersnap widgets.

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.
It's fairly easy to implement the Usersnap widget as part of the layout of your web application.

In order to do that, you need to:

• Set a DOM node (target element) which is where the widget should be appended.
• Mount the widget to the specific DOM Node.

Here's an example of how it can be done:

import { loadEmbed } from '@usersnap/browser'

// DOM node of the page where the widget should get appended to
const targetNode = document.getElementById('embedWidget')

const projectApiKey '<YOUR_PROJECT_API_KEY>'

loadEmbed(projectApiKey).then((api) => {
  api.init({
    mountNode: document.getElementById(targetNode)!,
  })
})

This code imports the loadEmbed function from the Usersnap package, gets the DOM node where the widget should be appended, sets the Project API key, calls the loadEmbed(projectApiKey) function with the key passed in, which returns a promise containing an object. The init method is then called with the mountNode option passed in as an argument, to initialize the Usersnap embed widget and attach it to the specific DOM node of the page.

Please note that you should use your Project API key instead of your Space API key. Your Project API key can be found right under your Space API key: