# JavaScript ( Web )

## 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.

```javascript
airim('widgetOpen') // opens the widget

airim('widgetClose') // closes the widget

airim('widgetHide') // hides the widget and the launcher on the page

airim('widgetShow') // displays the widget on the page
```

#### 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.

```javascript
// identifier can be anything like email / username etc but should be unique
// name can be any string
// tags are meant to tag a user like 'new-lead' or 'happy-customer'
airim('identify','<identifier>',{
	 name: '<John Smith>',
	 phone: '<5552121222>',
	 email: 'john@email.com',
	 tags: ['tag1','tag2']
 })
```

#### Callbacks

OnLoad callback

```javascript
airim('onload', function(){
  console.log('airim widget is loaded')
  // custom function here
  doSomething();
})
```

Event callbacks are executed when an event like 'Open' or 'Close' takes place . Examples below

```javascript
airim('on', 'widgetClose', function(){
  console.log('airim widget was closed')
  // custom function here
  doSomething();
})

airim('on', 'widgetOpen', function(){
  console.log('airim widget was opened')
  // custom function here
  doSomething();
})
```

#### Custom positioning of the icon

```javascript
// set the position 40px from bottom right corner
airim('setPosition',{
  right: '40px',
  bottom: '40px'
})
//set position on the left side
airim('setPosition',{
  left: '20px',
  bottom: '40px'
})
```

#### Subscribe to events

```javascript
airim('subscribe', function(event){
    // event contains a data like
    // {    
    //     event_cat_id: 108, --> FAQ category id
    //     event_message: "Clicked on Question: What is life?",
    //     event_name: "faq_click", --> name of the event
    //     event_obj: "FAQ",
    //     event_obj_id: 66, --> FAQ id 
    //     event_type: "click" ,
    //     event_value: "What is life?"    
    // }
    myFunction(event)
})
```

#### 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.

```javascript
airim('reload')
```

### Examples

#### Show Airim when a button is clicked on your UI

```javascript
// hide airim initially
// you can place this code directly below the airim script
airim('widgetHide')

var button = document.getElementById('my-button-id')
button.addEventListener('click', function(){
  airim('widgetShow')
  airim('widgetOpen')
})
```

#### 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

```javascript
var seconds = 10
window.setTimeout(function(){
    airim('widgetOpen')
},seconds * 1000)
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.airim.co/widget-javsscript-api/javascript-web.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.