Stomio | Beta Programs That Ship Better Products

The Stomio widget enables you to provide a streamlined Stomio experience to your users without navigating away from your web application.

To utilize the Stomio widget, you must create an in-app project in your Stomio account. Additionally, you need to install our SDK in your web application.

Your First Project In-App with Stomio Widget

Follow this straightforward tutorial to have the Stomio Widget installed and ready to receive feedback from your users directly in your app.

Step 1: Create a Feedback In-App Project

Create a Feedback in-app project in your Stomio account and activate it.
Obtain the Project SDK token from the Dev Info section. It is necessary when installing the SDK.
- The Project SDK token is unique to each project and is used to connect the widget to its corresponding project.

Step 2: Installation

Install the library:

Using npm:

npm install @stomio/stomio-web-sdk

Alternatively, use our CDN:

<script src="https://sdk.stomio.io"></script>

Step 3: Configuration

In your web application, initialize the Stomio library, create the widget, and display it.

await stomio.init({
  project: 'PROJECT_TOKEN', // replace it with your project SDK token
})

// floating button mode
const widget = stomio.createWidget()

// manual mode
const widget = stomio.createWidget({ mode: 'manual' })
widget.open()

That's it! You have successfully created your in-app project.

Advanced Topics

User Information and Filtering

Sometimes, you want to know who created a bug report or provided specific information through the Stomio Widget. Or you want to display the Stomio Widget to a specific subset of your users based on data you have about them.

Stomio provides a secure method to transmit current user information through the user property in the stomio.init method. This is known as the user security token.

What information can you send?

email: Providing an email allows you to check who said what under the results section of your project. This is required in beta projects.
Any custom property: You can send other properties of your choice, which you can then use to create audiences.

Using a Specific Version

For most users, it is safe to use the latest version. However, if you need to use a different version, all valid SDK versions are available using the following pattern:

sdk.stomio.io/stomio.MAJOR.MINOR.PATCH.cjs

For example:

sdk.stomio.io/stomio.1.1.0.cjs

Security

Script integrity tags

If you are using Stomio directly in HTML, you can use the integrity attribute to verify the integrity of the library. For every version, a hash is provided at sdk.stomio.io/integrity.MAJOR.MINOR.PATCH.txt.

<script src="https://sdk.stomio.io/stomio.1.1.0.js" integrity="sha384-Bh3AWRWZ8RBzK9zP98hBhnt5mnzjatf7YnbqlWWeAOMQtIJlaWPB5O+9+MMzkAkl"></script>

Content Security Policy

If your web application is using Content Security Policy, you will need to allow the following sources:

default-src 'self';
frame-src https://embed.stomio.io;
connect-src https://api.stomio.io YOUR_BACKEND_URL;
script-src 'self' 'unsafe-inline' https://sdk.stomio.io;
media-src *.storage.googleapis.com;
style-src 'self' 'unsafe-inline';
img-src 'self' data: *.storage.googleapis.com;
font-src 'self' data:

Replace YOUR_BACKEND_URL with the actual URL or domain.