JavaScript ( Web )

Search…
JavaScript ( Web )
Here's a guide that can enable you to trigger Airim from any custom link or button from your website/app
Introduction
Airim has a JavaScript API to control its behaviour as you like. Below are functions that Airim supports. 
These commands are queued so you don't need to wait for airim to load completely, events will be automatically fired on load in sequence.
1
airim('widgetOpen') // opens the widget
2
​
3
airim('widgetClose') // closes the widget
4
​
5
airim('widgetHide') // hides the widget and the launcher on the page
6
​
7
airim('widgetShow') // displays the widget on the page
Copied!
Identify Users
You can use the identify api to map a user on your product to an airim user. Please see the code below.
If you add the keys name, phone, email as attributes, the value will be auto populated in contact form.
1
// identifier can be anything like email / username etc but should be unique
2
// name can be any string
3
// tags are meant to tag a user like 'new-lead' or 'happy-customer'
4
airim('identify','<identifier>',{
5
	 name: '<John Smith>',
6
	 phone: '<5552121222>',
7
	 email: '[email protected]',
8
	 tags: ['tag1','tag2']
9
 })
Copied!
Callbacks
OnLoad callback
1
airim('onload', function(){
2
  console.log('airim widget is loaded')
3
  // custom function here
4
  doSomething();
5
})
Copied!
Event callbacks are executed when an event like 'Open' or 'Close' takes place . Examples below
1
airim('on', 'widgetClose', function(){
2
  console.log('airim widget was closed')
3
  // custom function here
4
  doSomething();
5
})
6
​
7
airim('on', 'widgetOpen', function(){
8
  console.log('airim widget was opened')
9
  // custom function here
10
  doSomething();
11
})
Copied!
Custom positioning of the icon
1
// set the position 40px from bottom right corner
2
airim('setPosition',{
3
  right: '40px',
4
  bottom: '40px'
5
})
6
//set position on the left side
7
airim('setPosition',{
8
  left: '20px',
9
  bottom: '40px'
10
})
Copied!
Subscribe to events
1
airim('subscribe', function(event){
2
    // event contains a data like
3
    // {    
4
    //     event_cat_id: 108, --> FAQ category id
5
    //     event_message: "Clicked on Question: What is life?",
6
    //     event_name: "faq_click", --> name of the event
7
    //     event_obj: "FAQ",
8
    //     event_obj_id: 66, --> FAQ id 
9
    //     event_type: "click" ,
10
    //     event_value: "What is life?"    
11
    // }
12
    myFunction(event)
13
})
Copied!
Automatic Reload
If you have a single page application the widget will not be able to detect url changes. To make sure the widget is always updated please call this API when the url is changed.
1
airim('reload')
Copied!
Examples
Show Airim when a button is clicked on your UI
1
// hide airim initially
2
// you can place this code directly below the airim script
3
airim('widgetHide')
4
​
5
var button = document.getElementById('my-button-id')
6
button.addEventListener('click', function(){
7
  airim('widgetShow')
8
  airim('widgetOpen')
9
})
Copied!
Open airim after some time
To automatically open the airim widget after 10 seconds, copy paste the following code just below the airim init function, inside the script tag
1
var seconds = 10
2
window.setTimeout(function(){
3
    airim('widgetOpen')
4
},seconds * 1000)
Copied!
Integrations - Previous
Google Tag Manger
Next - Widget API
Using Iframe mode
Last modified 2yr ago
Copy link
Contents
Introduction
Examples