Product Guide
  • Introduction
  • Product Training
    • Account & Project Management
    • Product Feedback Management
    • Product Guide For Session Replay & Heatmap
  • installation
    • Web
      • JavaScript SDK
      • Google Tag Manager
    • Mobile App SDK
      • Android Survey SDK
      • IOS Survey SDK
      • React Native SDK
    • Converse AI
      • Create a new Converse AI
      • Configure Conversation
  • Compose Survey
    • Create With AI
    • Survey From Scratch
    • Survey Templates
    • Enterprise Surveys
    • In-Product Surveys
    • Prototype Tests
    • Replays
    • Website Feedback Button
    • In-Product Video Widget
  • Survey Designer
    • Survey Theme
    • Survey Question Types
      • Welcome Page
      • Net Promoter Score (NPS)
      • Customer Satisfaction Score (CSAT)
      • Customer Effort Score (CES)
      • Video
    • Advance Survey Design
    • Survey Design Guidelines
  • Launch Survey
    • Web Surveys
    • Social Media Survey
    • Email Survey
    • Bulk Email Surveys
    • SMS Survey
      • SMS Survey By Link
    • Website Feedback
    • Events
  • Survey Branching
    • Jumping Questions
    • Disqualify Response
    • Terminate
  • Integration
    • Shopify
    • Slack
    • Google Sheet
    • Zendesk
    • Freshdesk
    • Zapier
    • Google Analytics
    • Square Online Integration
  • Workflows
    • Salesforce Workflow
      • Create an email campaign for Salesforce Case/Opportunity.
      • Map survey response data into Salesforce
        • Create event-based Salesforce workflow
      • Import contact data from Salesforce to Qwary
    • Zendesk Workflow
      • Send post-resolution email surveys campaign
      • Map survey response data into Zendesk
        • Event-based Zendesk workflow
    • Snowflake Workflow
  • Insights
    • Standard Reporting
    • NPS Reporting
    • CSAT/CES Rating
    • Key Driver Analysis
    • Text AI
      • Topics
  • Team Collaboration
    • Invite Team Member
    • Share Survey
    • Share Dashboard
  • Closed Feedback Loop
    • Workflow
    • Native Case Management System
    • Rule Based Email Notifications
  • Use Cases
    • Product Onboarding Surveys
    • Review Generation Campaigns
    • Square Online Customer Feedback
    • Ultimate Guide To Net Promoter Score (NPS)
    • Ultimate Guide For Customer Satisfaction Score (CSAT)
    • Ultimate Guide For Customer Effort Score (CES)
    • Product Survey Questions Guide
    • Segment customers for Email/SMS Surveys
  • Videos
    • Create a Survey
    • Create a Video Survey
    • Question Types
    • Design a Survey
    • Branching
    • Multilingual Surveys
    • Settings
    • Responses Settings
    • Distribute Survey
    • Square Online Integration
    • Analysis
    • Company Settings
    • Page
  • FAQ
    • Delete Test Responses
    • Turn off Qwary Branding
    • How to Configure Custom SMTP for Your Survey?
    • How to Request CNAME?
    • How to use Survey Variables?
    • Adding Hyperlink to Survey Text
    • GDPR Compliance
    • Survey Phishing
    • Enable GeoIP Collection for Your Survey
    • Add Custom Contact Field
    • Unsubscribe Contacts from List
    • Customize Image Size
    • Close Survey on Specific Date
    • Install Qwary Intercept with Single Page Applications
    • Move Survey Question
    • Download Response
    • Enable Partial Submission
  • Account & Billing Management
    • Reset Password
    • Invite Team Member
  • Converse AI
Powered by GitBook
On this page

Was this helpful?

  1. installation
  2. Web

JavaScript SDK

When installing Qwary's intercept JavaScript SDK, we highly recommend installing the JavaScript code snippet. This approach guarantees that you always have the most up-to-date version of our SDK, alleviating the burden on your engineering team. In addition, with this method, they won't need to manually retrieve and deploy updates whenever Qwary releases a new SDK version. Consequently, you will seamlessly gain access to the latest features available on the most recent SDKs.

Obtain SDK API Key

Log into your Qwary account and go to Settings --> Resources --> Install SDK --> Copy SDK API Key.

Install Qwary

To enable Qwary's user tracking on specific pages of your website, simply add the following JavaScript snippet to each of those pages before the closing </body> tag. You can paste the snippet anywhere within the page's code. Remember to replace the placeholder API_KEY with the API key you obtained in the previous step.

Install & initialize for visitors

<script type="text/javascript">	           
var app_id = "ADD_YOUR_API_KEY_HERE";
window.qwSettings = {
appId : app_id
}
!function(){if(!window.qwTracking){window.qwTracking=Object.assign({},window.qwTracking,{queue:window.qwTracking&&window.qwTracking.queue?window.qwTracking.queue:[],track:function(t){this.queue.push({type:"track",props:t})},init:function(t){this.queue.push({type:"init",props:t})}}),window.qwSettings;var t=function(t){var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://static.qwary.com/resources/sdk/intercept/qw.intercept.sdk.v4.js";var n=document.getElementsByTagName("script")[0];n.parentNode.insertBefore(e,n)};"complete"===document.readyState?t():window.attachEvent?window.attachEvent("onload",t):window.addEventListener("load",t,!1)}}(),qwTracking.init(qwSettings);</script>

Install & initialize with user information

<script type="text/javascript">	 	            
var app_id =  "ADD_YOUR_API_KEY_HERE";
window.qwSettings = {
	appId : app_id,
	identifier : 'email',
	contact :{ //you can also populate custom attributes in this
		firstName : '%CONTACT_FIRST_NAME%',
		lastName :  '%CONTACT_LAST_NAME%',
		email:  '%CONTACT_EMAIL_NAME%'
		/*additional fieldName: fieldValue*/
	}
}
!function(){if(!window.qwTracking){window.qwTracking=Object.assign({},window.qwTracking,{queue:window.qwTracking&&window.qwTracking.queue?window.qwTracking.queue:[],track:function(t){this.queue.push({type:"track",props:t})},init:function(t){this.queue.push({type:"init",props:t})}}),window.qwSettings;var t=function(t){var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://static.qwary.com/resources/sdk/intercept/qw.intercept.sdk.v4.js";var n=document.getElementsByTagName("script")[0];n.parentNode.insertBefore(e,n)};"complete"===document.readyState?t():window.attachEvent?window.attachEvent("onload",t):window.addEventListener("load",t,!1)}}(),qwTracking.init(qwSettings);</script>

Create a new contact field.

To create a new contact field,

  1. Enter field name.

  2. Select the field's data type. Qwary supports string, number, and date data types for contact fields.

  3. Click 'Save'

<script type="text/javascript">	 	            
var app_id =  "ADD_YOUR_API_KEY_HERE";
window.qwSettings = {
	appId : app_id,
	identifier : 'email',
	contact :{ //you can also populate custom attributes in this
		firstName : '%CONTACT_FIRST_NAME%',
		lastName :  '%CONTACT_LAST_NAME%',
		email:  '%CONTACT_EMAIL_NAME%',
		list : {
			'LIST_NAME_1',
			/*additional list names*/
		}
		/*additional fieldName: fieldValue*/
	}
}
</script>
!function(){if(!window.qwTracking){window.qwTracking=Object.assign({},window.qwTracking,{queue:window.qwTracking&&window.qwTracking.queue?window.qwTracking.queue:[],track:function(t){this.queue.push({type:"track",props:t})},init:function(t){this.queue.push({type:"init",props:t})}}),window.qwSettings;var t=function(t){var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://static.qwary.com/resources/sdk/intercept/qw.intercept.sdk.v4.js";var n=document.getElementsByTagName("script")[0];n.parentNode.insertBefore(e,n)};"complete"===document.readyState?t():window.attachEvent?window.attachEvent("onload",t):window.addEventListener("load",t,!1)}}(),qwTracking.init(qwSettings);</script>

Verify Installation

Here are the steps to follow to verify if the Qwary javascript SDK installation is functioning correctly:

  1. Load a page from your website or web app where you have installed the Qwary intercept SDK.

  2. Open the developer console in your web browser.

  3. Navigate to the "Network" tab within the developer console.

  4. Check the status code of the request. For example, if the status code is 200 or 304, it indicates that your installation is working correctly.

Logout

For precise user association and to prevent inaccurate activity tracking, it is highly recommended to log out of Qwary when a user logs out of your webpage. Utilizing the logout() function upon user logout effectively prevents new activities from being mistakenly attributed to the incorrect user. However, it's essential to be aware that if you invoke logout() on an unauthenticated user, Qwary will generate a new contact profile for them. Consequently, this newly created contact will be counted separately towards your MTU (Monthly Tracked Users) limit.

<script>
qwTracking.logout();
</script>

Event Tracking

Qwary employs event triggers to showcase in-product surveys after a user completes a specific action. These triggers can also be filtered to target users who have previously performed the action. After successfully installing the Qwary SDK, the subsequent step involves configuring event tracking to enable the triggering of surveys. Qwary offers two distinct types of events, auto-trigger and manual-trigger events, which effectively initiate and filter your projects.

PreviousWebNextGoogle Tag Manager

Last updated 1 year ago

Was this helpful?

You can pass additional contact fields when in window.qwSetttings --> contact object. To create a new contact field, go to Account Settings --> and click the 'Add field' button.

You can also add a contact to the new with SDK. Below is the code snippet; replace 'LIST_NAME_1' with the contact list name to which you want to add the contact. You can also pass more than one contact list in the list field.

Look for a network request named "intercept" that targets the URL: "".

For more information on events, see

Contact fields
contact list
https://static.qwary.com/resources/sdk/intercept/
events documentation.
Contact Fields