Installation

Overview

Survicate offers several installation methods to choose from, depending on your needs and preferences:

• Manual JavaScript code installation
• Survicate Web Package
• Survicate Web Surveys Wrapper
• Via Segment
• Wordpress Plugin
• Google Tag Manager Plugin
• Braze

Manual implementation

By opting for Manual implementation or utilizing the Survicate Web Surveys Wrapper, you ensure automatic access to the latest SDK version. These methods negate the need for frequent updates whenever Survicate releases new SDK features.

NPM packages

Survicate offers two NPM packages for integrating surveys into your JavaScript applications: the Survicate Web Package, designed for embedding surveys directly within your code, and the Survicate Web Surveys Wrapper, optimized for easy installation of Survicate's tracking code in your codebase.

• Survicate Web Package on npmJS
• Survicate Web Surveys Wrapper on npmJS

Comparison: Web Package vs. Web Surveys Wrapper

Feature	Web Package	Web Surveys Wrapper
Integration Type	Direct integration in JavaScript applications	Installation of Survicate tracking code
HTML Impact	Does not add any script to the HTML document	Adds script to the HTML document
Security	Prioritizes security, no external scripts required	-
TypeScript Support	Includes TypeScript type definitions	Includes TypeScript type definitions
Version Updates	Manual updates for new SDK versions	Automatically uses the latest Survicate SDK version

Workspace Key

Workspace key is a unique identifier of your teamspace on Survicate account. It will be needed to complete the installation. Your workspace key can be obtained via your Survicate account here

Installation methods

Manual implementation

Place this code right before the </body> tag of your website or web app.

Information about the code being installed is sent to Survicate the moment your site is loaded with our code on it.

To verify installation on your own, you can use the _svc method in the browser console. It should return your Workspace Key.

NPM packages

This section applies only to users, who decided to install Survicate tracking code either via the npm web surveys package, or npm wrapper.

Installation

Initialization

Segment

Survicate can be installed with Segment. Follow these instructions, to add Survicate as a destination in Segment.

WordPress

Use our WordPress plugin to install Survicate on your WordPress website. Follow these instructions and use this workspace key during the installation.

Google Tag Manager

To install Survicate using Google Tag Manager, follow this article.

Braze

To install Survicate using Braze, follow this article.

Braze in-app messages are displayed in an iframe by default while the app's background is blocked. To allow interaction with your app, while Survicate surveys are displayed, you need to:

1. Add opts.useBrazeIframeClipper = true to your Survicate-Braze snippet.

A sample snippet:

2. Integrate the Braze bridge using one of the following options:

   • NPM package: Install @survicate/braze-bridge-npm package in the file where you initialize Braze and use the initBrazeBridge function.
   • Script snippet: Add the following script to your page. With data-auto-init="true", the Braze bridge will be automatically launched:

   A sample React implementation (NPM package):

Users identification

Each time a user answers a Survicate survey they're assigned a unique, anonymous ID. For most companies it makes sense to have these responses identified. To do so, you can pass user IDs and attributes from your website or web app.

Here's a sample implementation:

User attributes

Survicate lets you also pass other attributes. Attributes provide deeper insight into collected feedback. You can use them to target the right audiences and filter survey results. Some example attributes that can be passed to Survicate are:

• Company name
• Subscription name
• Signed up date

User attributes can be seen on their profile in the respondents tab.

Supported Attribute Types

• String: Any textual data, e.g. company names, user name, etc.
• Numbers: Includes integers and decimals, both positive and negative.
• Boolean: True or false values.
• Date: Accepts date objects created using Date() constructor: new Date('1995-12-17T03:24:00') or dates in ISO 8601 format (e.g., YYYY-MM-DDTHH:MM:SSZ).

Important to note:

• Attribute name and value can have max length of 255 characters. Longer values will be truncated to 255 characters.
• Strings should not be enclosed within the following characters: , *, [], %, ~, --, $ (e.g., 'name':'$john$').
• Attribute names are case sensitive.

To pass user attributes to Survicate and use them for survey targeting, you should define these attributes when initializing Survicate. Please note that attribute names are case-sensitive, whereas attribute values are not.

Survey language

By default, Survicate automatically detects the appropriate survey language using the following priority:

1. <html lang> attribute - the language your page declares on its <html> element (only when enabled via useHtmlLangAttribute)
2. URL language - query parameters (e.g., ?lang=de), path segments (e.g., /de/page), or top-level domain (e.g., .de)
3. Browser language - the user's browser language settings

You can override this automatic detection by setting a forced language during initialization. This is useful when you know the user's preferred language from your application's settings or user profile.

Important to note:

• Forced language has the highest priority and overrides URL-based and browser-based language detection.
• Forced language is session-based, so it will be applied only for the current session.
• If user sets "pt-br" as language code, and only "pt" is available in your survey's translations, the survey will display in "pt" language.
• If user sets "pt" as language code, and "pt-br" is available in your survey's translations, the survey will display in "pt-br" language.
• The language code should be a valid ISO 639-1 code (e.g., en, de, fr, es, pt).
• The specified language must be available in your survey's translations. If the language is not available, the survey will display in its default language.
• To change the language dynamically after initialization, use the setSurveyLanguage method.

Detect language from the html lang attribute

If your site declares its current language through the standard lang attribute on the <html> element, you can opt in to using it as a language detection source with useHtmlLangAttribute. This is especially useful for single-page applications with an in-app language switcher, where the selected language is never reflected in the URL and the browser language may not match what the user picked.

Important to note:

• The option is opt-in and off by default without it, language detection works exactly as described above.
• When enabled, the <html lang> value is checked after a forced language (forcedLanguage / setSurveyLanguage) but before URL-based and browser-based detection.
• Language changes are picked up live: when your application updates the <html lang> attribute (e.g., the user switches the language in your app, with no page reload), a survey that is currently open re-renders in the new language and any survey shown later uses it too.
• An explicit language choice always wins: a language set via setSurveyLanguage or picked by the respondent in the survey's language selector is not overridden by later <html lang> changes.
• If the <html lang> value has no matching survey translation, detection falls back to URL, browser, and default language as usual.
• The option applies to website surveys (widget and feedback button).

Survey theme

By default, Survicate uses the "auto" theme mode, which follows the browser preference (light or dark). You can override this by setting a theme mode during initialization. This is useful when you want surveys to match your website's theme from the first load.

Allowed values for themeMode are:

• "light" force surveys to use the light theme
• "dark" force surveys to use the dark theme

For the dark theme to be applied, the survey's theme must have a dark mode variant configured in the Survicate panel.

Important to note:

• Theme mode is applied when the survey loads; behavior matches the setThemeMode method but is set at init.
• To change the theme dynamically after initialization, use the setThemeMode method.

Content Security Policy (CSP)

Content Security Policy (CSP) serves as a safeguard against code injection attacks, where harmful content is executed within a trusted webpage. However, this security measure may interfere with the functionality of Survicate on your site. If you use CSP, you should update it with the following directives to ensure Survicate's surveys work effectively without compromising security:

Reducing the policy length

If you are constrained by header size limits, you can shorten the policy in two ways.

Option 1 Use wildcard subdomains

Replace the explicit subdomain lists with wildcard patterns. This reduces the policy by approximately 40%. Note that the full explicit list above is stricter it allows only the exact subdomains Survicate currently uses, whereas wildcards would also cover any other subdomain under survicate.com and survicate-cdn.com.

Option 2 Remove entries that don't apply to your setup

Depending on your installation method and the features you use, some entries are not required:

• script-src Survicate domains only needed when loading Survicate via the remote script tag or the @survicate/survicate-web-surveys-wrapper NPM package. If you use the @survicate/survicate-web-package NPM package, no external scripts are fetched from Survicate servers, so you can remove the Survicate domains from script-src entirely.
• img-src https://images.unsplash.com only needed if your surveys contain images sourced from Unsplash (e.g. a background image selected from the Unsplash library in the survey editor). If none of your surveys use Unsplash images, you can remove this entry.
• connect-src https://production-respondent-uploads.s3.eu-west-1.amazonaws.com only needed if your surveys include a screenshot question. If you don't use the screenshot feature, you can remove this entry.

Nonce

Survicate allows users to implement nonce as an additional security measure when embedding scripts. A nonce (number used once) helps mitigate certain types of attacks, such as Cross-Site Scripting (XSS), by ensuring that each script request is authorized.

How to implement nonce with different installation types

Disable sensitive data persistence

The Disable Sensitive Data Persistence feature ensures that user data is stored only in Session Storage, not Local Storage. This means data is cleared when the browser or tab is closed, enhancing privacy by preventing long-term storage of sensitive information.