Skip to main content

JavaScript SDK - Installation Guide

This guide will walk you through installing the Sondar JavaScript SDK on your website or web app.

Li Xia avatar
Written by Li Xia
Updated over a month ago

1. Overview

The Sondar JavaScript SDK is a lightweight library that enables seamless integration of Sondar’s features into your website or application. The SDK allows you to trigger surveys, collect user feedback, and send user attributes.

With the SDK, you can easily connect key user actions, like purchases or feature usage to trigger in-product surveys, ensuring feedback is gathered precisely when it matters most. It’s designed to be developer-friendly, requiring minimal setup while offering flexibility for customization.


2. Prerequisites

  • Access and permissions to modify HTML files or templates of your website where the SDK will be installed.

  • Your unique API key, which can be found in the Settings tab of your Sondar workspace.


3. Installing the SDK on Your Website

1. Copy the following code snippet:

<script src="https://app.sondar.ai/sdk/sondar-sdk.js"></script>
<script>SondarSDK.builder().setApiKey('YOUR_API_KEY').init();</script>

2. Replace YOUR_API_KEY with your unique API key.

3. Paste the snippet into the <head> or <body> section of your HTML file. We recommend placing it before the closing </body> tag for optimal performance.

Example:

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your Website</title>
</head>

<body>
<!-- Your website content -->

<!-- PASTE SONDAR SDK SNIPPET HERE -->
<script src="https://app.sondar.ai/sdk/sondar-sdk.js"></script
<script>SondarSDK.builder().setApiKey('YOUR_API_KEY').init();</script>
</body>

</html>

3.1 - Finding Your API Key 🔑

To initiate the SDK, you’ll need your unique API key. Follow these steps to find it in your Sondar account:

1. Log in to your Sondar Account

Go to https://app.sondar.ai and sign in with your credentials.

2. Navigate to the Settings Page

Click settings from the main menu.

3. Access the Profile Section

In the Settings section, locate and click on the Profiles tab.

4. Copy Your API Key

Click Copy to copy the API key to your clipboard.

⚠️ Important: Treat your API key like a password. Do not share it publicly or expose it in your website’s client-side code without proper safeguards.

3.2 - Set User Identity 🧒🏼👦🏻

If your website offers a logged-in experience, you have the option to identify users with a unique identifier, such as their ID or email. Doing so lets you tap into powerful automation and data analysis capabilities.

For example, you can:

• Target users based on their behavior, attributes, and past survey interactions.

• Connect survey responses directly to user profiles in your app.

• Sync survey data with your CRM, product analytics tool, or customer data platform.

This approach not only streamlines your data management but also enhances your ability to create personalized user experiences.

After successful authentication, call this method:

<script>SondarSDK.setUser({
id: '123', // Replace with the user's unique id (optional)
'name': 'Jane Ramos', // Replace with the user's name (optional)
'email': '[email protected]' // Replace with the user's email (optional)
})</script>


4. Verify the Installation

1. Visit Your Website

• Open your website in a browser where you’ve installed the SDK.

2. Check your SDK Connection Status

• Log in to your Sondar account at https://app.sondar.ai.

• Navigate to Settings > Profile.

3. Confirm Connection

• If the SDK is properly initiated, the status under Javascript SDK should display as Connected.

• If the status is not connected, double-check your implementation steps and ensure the API key is correctly set.


5. Identifying Users

Once the SDK is successfully installed and connected, you can take advantage of the following features to gather valuable feedback and insights:



6. Next Steps

Once the SDK is successfully installed and connected, you can take advantage of the following features to gather valuable feedback and insights:


7. Get Help

If you have any questions or just need a hand with setting up the SDK, get in touch as we are standing to help. [email protected]

Did this answer your question?