Install the Meticulous Recorder as a Script

There are a couple of ways to add the Meticulous recorder to your web application:

  1. Via a loader package
  2. By inserting it as script tag.

We recommend you to use the loader package as it gives you greater control over it's initialisation. It also makes it easier to ensure the recorder initialises before your app in order to capture all network requests / user interactions correctly.

However, if your app does not support installing using the loader package, you can insert the Meticulous recorder via a script tag.

Install the Meticulous recorder via a script tag

<head>
  ...
  <script data-project-id="<RECORDING_TOKEN>" data-is-production-environment="<true/false>" src="https://snippet.meticulous.ai/v1/meticulous.js"></script>

  <!--Meticulous snippet should be added before your app -->
  ...
  <script src="main_app.js"></script>
</head>

The script tag should be added to your index.html file, before any other script tags, and without async or defer attributes set: the recorder must load before you app in order to capture all network requests correctly (learn more).

Validating installation

Once you add the Meticulous snippet open your webapp (either locally or on the environment that you injected the snippet into) and record a session by clicking around on your web app.

If the snippet was installed successfully you should be able to view the recorded session in your Meticulous dashboard in the Sessions section.

I've installed the snippet but why do I not see any sessions in my Meticulous dashboard?

See troubleshooting for more information on why this might be happening.

Issues / questions?

We're always happy to help you with any issues you encounter while setting up or anything you might be unsure about.

Get in touch by emailing support@meticulous.ai

Next Steps