@fullstory/snippet NPM

FullStory Snippet

FullStory's snippet package provides a number of ways to integrate the FullStory snippet with your build tooling of choice. For a more integrated experience, try the browser SDK.

Installation

with npm

npm i @fullstory/snippet --save

with yarn

yarn add @fullstory/snippet

Exports

`generateSnippetText`

Options

orgId - Sets your FullStory Org Id. Find out how to get your Org Id here. Required.
host - The recording server host domain. Can be set to direct recorded events to a proxy that you host. Defaults to fullstory.com.
script - The full location of the FullStory script (fs.js). FullStory hosts the fs.js recording script on a CDN, but you can choose to host a copy yourself. Defaults to edge.fullstory.com/s/fs.js.
namespace - Sets the global identifier for FullStory when conflicts with FS arise; see help. Defaults to FS.

Usage

Returns a stringified version of the FullStory snippet. This is useful for various build systems like webpack.

Examples

Webpack (docs)

// webpack.config.js
{
  // ...
  plugins: [
    new HtmlWebpackPlugin({
      fsSnippet: generateSnippetText({ orgId: 'xyz' }),
      template: 'index.html',
    })
  ]
}

// index.html
<!DOCTYPE html>
<html>
  <head>
    <script><%= htmlWebpackPlugin.options.fsSnippet %></script>
  </head>
  <body>
  </body>
</html>

Gatsby (docs)

// gatsby-ssr.js
exports.onRenderBody = ({ setHeadComponents }) => {
  setHeadComponent(
    <script
      dangerouslySetInnerHTML={{
        __html: generateSnippetTxt({ orgId: 'xyz' }),
      }}
    />
  );
}