# Welcome to Airim Docs !

This documentations contains everything on how Airim works.


# Customizing Contact Form

How do you control the working of Contact Form in Airim?

## What is the 'Contact Form'?

When customers want to contact the company using Airim, they click on the 'Mail' icon, fill their details and send across their message using the 'Contact Form'.

![](/files/-LR7fjLUE2zgVN8oklAn)

## Customising behaviour of Contact Form

Go to Settings > Contact Options > Contact Form. 

![](/files/-LR7hp45KthzF_8LMpEm)

Here, you can customise the behaviour of contact form in 2 ways:

**Way 1**: Decide who should receive the information sent by the customers directly in their inbox. Simply enter the mail IDs of respective people.

![1. Decide whose inbox should hit up when customer fills the form](/files/-LR7iRmXx3COAeS9rZ69)

**Way 2**: If you do not wish for customers to send contact you through Airim, you can disable this option. Simply disable 'Show contact form' from the same tab.

![Disable Contact form](/files/-LR7jp6CC72u5iXNLGFa)


# Adding FAQs one-by-one

How to add FAQs using Content Manager

You can add, edit or remove FAQs from your Airim widget using the 'Add FAQ' button highlighted in the red ellipses.

![](/files/-LR6_KsvcXLVHswXXSnL)

<img src="/files/-LR6INM-PsLFimY6DD31" alt="" data-size="line"> \
Once you click on 'Add FAQ', you'll get a content box in the Question-Answer format where you can edit your FAQ.

After you're done editing content in the 'Add FAQ' section, click on 'SAVE' button present on the top right corner of the screen.&#x20;

![](/files/-LR6cC-rdhyIT3Za-Ec2)

That's it! You'll be able to see a freshly brewed FAQ on your screen.

![](/files/-LR6UW_OsPgMQhe7Q9xp)


# Importing FAQs

How to import FAQs from a Helpdesk software or your website page?

If you already have your FAQs hosted on any helpdesk software (such as Freshdesk, Zendesk) or on your own website pages, here is a way to import them all in 2 simple steps.

## 1. Click on 'Import FAQs' in the Content Manager section.

![Click on 'Import FAQs' to import your FAQs](/files/-LR6dvMq5HrilGjSOJc-)

## 2. Select the helpdesk software

Simply choose the helpdesk software from where the import needs to be done, enter the respective URL and click 'Import'. In the example below, we chose Freshdesk as the software and airim.freshdesk.com as the URL to import FAQs from.

![](/files/-LR6h9-IhMKPvVhtTFKM)

Currently, we offer 'Import' feature from **Freshdesk, Zendesk, Intercom** and your **website's FAQ page**.

![](/files/-LR6iFXf53Q5fuCuBN4y)


# Adding Team Members

How to add other team members to the Airim dashboard?

When you create a new account with Airim, you are already added as an Admin. You can add multiple members from your team using the 'Manage Team' option in the 'Settings' tab.

![Step 1: Click on 'Manage Team'](/files/-LR6rEoYXwRrNwjTiHL1)

Click on the icon marked with a red circle below to add more team members from your organisation.

![Step 2: Click on the 'Add Member' icon](/files/-LR6uy8sMj04dsmfSKri)

Once you click the icon, you'll get a screen to enter details such as Name, email ID, Password and Access Level of the new member you wish to add.

![Step 3: Enter the details of the new member](/files/-LR6v_l9pTKy4Slag_x4)

Once you save the information, you'll see that a new member is added to your Airim account.&#x20;

![A new team member is added to your Airim account](/files/-LR6wRxgKDDEJOUb2XPt)

Please note that there are two access levels for your Airim account, Admin and Agent. You can choose the access level of a member while adding her account to Airim. &#x20;

![](/files/-LR6xSnfSFcOalx6wztP)

While a person with Admin access can add or remove team members, Agent access does not have that priviledge. There is no other difference between these 2 access levels as of now.


# Customising Airim's Appearance

How to make sure that Airim fits in with your website/app seamlessly?

In the 'Settings' tab, click on 'Widget' to modify Airim's appearance on your website/app.&#x20;

![Step 1: Click on 'Widget' in the Settings tab](/files/-LR6zo1GDUXziyfnQZDy)

Click on 'Appearance' to explore the customisations you can do with Airim.

![Step 2: Click on 'Appearance'](/files/-LR702QsNmsWtCNzbWxw)

Before making any changes, we recommend disabling the widget by clicking 'Disable Widget'. This way you can change appearance without hampering the user experience.&#x20;

![Option to disable widget before making changes in appearance](/files/-LR7KhVyNLVbxDBtds3E)

A drop-down menu will appear where you can choose widget's color, position and placeholder text for Search bar. You can see these sample changes you make here reflecting on the right-hand side. This will give you an instant idea about how Airim would look with the changes you made.&#x20;

![Step 3: Change the Color, Position and Placeholder text based on your requirements ](/files/-LR73IkcK0uQuAphe_h_)

Not happy with the changes you just made? Want to bring back the default settings?

Sweat not! We got a single-click solution for you to reset your default settings. All it takes is a click on 'Reset to default' option.&#x20;

![Bringing back DEFAULT settings](/files/-LR7Q-cUOwpuaQbB-LS-)

Once you're done making changes, you can click 'Enable Widget' to take it live again.

![](/files/-LR766j8Mtk6MBqbTuuL)

&#x20;That's it! Airim is ready to blend in with your website and help your customers.


# Taking Airim Live

How to get Airim Live on your website?

## Step 1

Go to Settings > Widget > JavaScript Code

![Step 1: Click on 'JavaScript Code'](/files/-LR7b1E_FaDUVZzkbJ6T)

## Step 2

Paste the following code snippet into your HTML page (just like you do with Google Analytics script)

![Step 2: Paste the above code into your HTML code ](/files/-LR7d8cWO9CgoOW9DCT7)

Done pasting the code?

Awesome! Airim is LIVE!


# Integrating with Zendesk

How to integrate Airim with Zendesk?

## 1. Go to Select > Integrations > Zendesk

![](/files/-LR821mUTJSScmuLkXfs)

## 2. Enter Domain and API Key&#x20;

![](/files/-LR82ntXIyaplzUnUjKA)

Do not forget to save your integration details :)

You can follow similar steps to integrate with Freshdesk, Intercom or your own Webhook.


# Integrating with Live Chat

How to Integrate Airim with a live chat solutions such as Tawk.to?

## Getting started with Tawk.to&#x20;

Firstly, please ensure that both Tawk.to's and Airim's script are copied on your website

Then in Airim dashboard, go to Settings -> Contact Options -> Live Chat.&#x20;

![Step 1: Select 'Live Chat' option](/files/-LR7X1LHi_iieYPQj0e8)

## Activating "Tawk.to"

Select Tawk.to from the Chat applications and click 'Activate' to get the integration up and running.

![](/files/-LR7ZlOcwaFmnw4fMkT6)

## To ensure seamless integration

Copy the following code snippet just below the tawk.to js snippet. This will ensure that, tawk.to widget is hidden when minimized and Airim widget is shown again.

```javascript
Tawk_API.onChatMinimized = function(){
    window.Tawk_API.toggleVisibility();
    airim("widgetShow");
};
```

Similarly, we integrate with other Live Chat solutions such as ConvertFox, Crisp, Drift, Freshchat, Intercom, LiveAgent, Olark and Zendesk Chat.


# Welcome to Airim Docs !

This documentations contains everything on how Airim works.


# Customizing Contact Form

How do you control the working of Contact Form in Airim?

## What is the 'Contact Form'?

When customers want to contact the company using Airim, they click on the 'Mail' icon, fill their details and send across their message using the 'Contact Form'.

![](/files/-LR7fjLUE2zgVN8oklAn)

## Customising behaviour of Contact Form

Go to Settings > Contact Options > Contact Form.&#x20;

![](/files/-LR7hp45KthzF_8LMpEm)

Here, you can customise the behaviour of contact form in 2 ways:

**Way 1**: Decide who should receive the information sent by the customers directly in their inbox. Simply enter the mail IDs of respective people.

![1. Decide whose inbox should hit up when customer fills the form](/files/-LR7iRmXx3COAeS9rZ69)

**Way 2**: If you do not wish for customers to send contact you through Airim, you can disable this option. Simply disable 'Show contact form' from the same tab.

![Disable Contact form](/files/-LR7jp6CC72u5iXNLGFa)


# Adding FAQs one-by-one

How to add FAQs using Content Manager

## 1. Click on Add FAQ

You can add, edit or remove FAQs from your Airim widget using the 'Add FAQ' button highlighted in the red ellipses.

![](/files/-LR6_KsvcXLVHswXXSnL)

&#x20;\
2\. Enter Question and Answer Content&#x20;

Once you click on 'Add FAQ', you'll get a content box in the Question-Answer format where you can edit your FAQ.

After you're done editing content in the 'Add FAQ' section, click on 'SAVE' button present on the top right corner of the screen.&#x20;

![](/files/-LR6cC-rdhyIT3Za-Ec2)

That's it! You'll be able to see a freshly brewed FAQ on your screen.

![](/files/-LR6UW_OsPgMQhe7Q9xp)


# Importing FAQs

How to import FAQs from a Helpdesk software or your website page?

If you already have your FAQs hosted on any helpdesk software (such as Freshdesk, Zendesk) or on your own website pages, here is a way to import them all in 2 simple steps.

1. Click on 'Import FAQs' in the Content Manager section.

![Click on 'Import FAQs' to import your FAQs](/files/-LR6dvMq5HrilGjSOJc-)

2\. Simply choose the helpdesk software from where the import needs to be done, enter the respective URL and click 'Import'. In the example below, we chose Freshdesk as the software and airim.freshdesk.com as the URL to import FAQs from.

![](/files/-LR6h9-IhMKPvVhtTFKM)

Currently, we offer 'Import' from **Freshdesk, Zendesk, Intercom, LiveAgent, ConvertFox** and your **website's FAQ page**.

![](/files/-Lgc2b6Cs2-ZVW7NJxOk)


# Adding Team Members

How to add other team members to the Airim dashboard?

When you create a new account with Airim, you are already added as an Admin. You can add multiple members from your team using the 'Manage Team' option in the 'Settings' tab.

![Step 1: Click on 'Manage Team'](/files/-LR6rEoYXwRrNwjTiHL1)

Click on the icon marked with a red circle below to add more team members from your organisation.

![Step 2: Click on the 'Add Member' icon](/files/-LR6uy8sMj04dsmfSKri)

Once you click the icon, you'll get a screen to enter details such as Name, email ID, Password and Access Level of the new member you wish to add.

![Step 3: Enter the details of the new member](/files/-LR6v_l9pTKy4Slag_x4)

Once you save the information, you'll see that a new member is added to your Airim account.&#x20;

![A new team member is added to your Airim account](/files/-LR6wRxgKDDEJOUb2XPt)

Please note that there are two access levels for your Airim account, Admin and Agent. You can choose the access level of a member while adding her account to Airim. &#x20;

![](/files/-LR6xSnfSFcOalx6wztP)

While a person with Admin access can add or remove team members, Agent access does not have that priviledge. There is no other difference between these 2 access levels as of now.


# Customising Airim's Appearance

How to make sure that Airim fits in with your website/app seamlessly?

In the 'Settings' tab, click on 'Widget' to modify Airim's appearance on your website/app.&#x20;

![Step 1: Click on 'Widget' in the Settings tab](/files/-LR6zo1GDUXziyfnQZDy)

Click on 'Appearance' to explore the customisations you can do with Airim.

![Step 2: Click on 'Appearance'](/files/-LR702QsNmsWtCNzbWxw)

Before making any changes, we recommend disabling the widget by clicking 'Disable Widget'. This way you can change appearance without hampering the user experience.&#x20;

![Option to disable widget before making changes in appearance](/files/-LR7KhVyNLVbxDBtds3E)

A drop-down menu will appear where you can choose widget's color, position and placeholder text for Search bar. You can see these sample changes you make here reflecting on the right-hand side. This will give you an instant idea about how Airim would look with the changes you made.&#x20;

![Step 3: Change the Color, Position and Placeholder text based on your requirements ](/files/-LR73IkcK0uQuAphe_h_)

Not happy with the changes you just made? Want to bring back the default settings?

Sweat not! We got a single-click solution for you to reset your default settings. All it takes is a click on 'Reset to default' option.&#x20;

![Bringing back DEFAULT settings](/files/-LR7Q-cUOwpuaQbB-LS-)

Once you're done making changes, you can click 'Enable Widget' to take it live again.

![](/files/-LR766j8Mtk6MBqbTuuL)

&#x20;That's it! Airim is ready to blend in with your website and help your customers.


# Taking Airim Live

How to get Airim Live on your website?

## Step 1

Go to Settings > Widget > JavaScript Code

![Step 1: Click on 'JavaScript Code'](/files/-LR7b1E_FaDUVZzkbJ6T)

## Step 2

Paste the following code snippet into your HTML page (just like you do with Google Analytics script)

![Step 2: Paste the above code into your HTML code ](/files/-LR7d8cWO9CgoOW9DCT7)

Done pasting the code?

Awesome! Airim is LIVE!


# Adding Vernacular Content

Vernacular content is very important to engage visitors from geographic locations who do not speak 'English'. Even in English-dominant geographies, there are people who are non-native English speakers

Airim automatically indexes your knowledge base content in the most meaningful context using proprietary NLP algorithms.

The first step is to click '[Content Manager](https://app.airim.co/home/faqsManager/)' on your dashboard. You can then follow the steps below based on how you wish to add content.

![](/files/-LX4xiw5COL3s-6VTPJz)

## 1. Importing Vernacular Content

1. Content Manager > Import FAQs > Select your desired Import option&#x20;
2. Enter the URL of the knowledge base link > Click 'Import'

## 2. Adding FAQs&#x20;

1. [Content Manager](https://app.airim.co/home/faqsManager/) > Click '[Add FAQ](https://app.airim.co/home/faqsManager/addFaq/)'&#x20;
2. Write Question and Answer > Click 'Save' to start adding vernacular content.&#x20;

If you do not have a vernacular keyboard, you can use Google's [Vernacular Keyboard](https://www.google.co.in/inputtools/try/) [t](https://www.google.co.in/inputtools/try/)o start adding content in your preferred language

## :point\_right: [Make your Knowledge Base Vernacular now! ](https://app.airim.co/home/faqsManager/):point\_left:&#x20;


# Enable or Disable Airim

How to control whether Airim would show on your website or not?

## 1. Go to Settings > Widget&#x20;

Choose the widget option from settings

![](/files/-LRg5mjHAfba4_-baNrY)

## 2. Use the Enable/Disable toggle option

You can use the toggle bar to enable or disable the visit based on your needs

![](/files/-LRg558kU5-b0MWOCtLD)


# Launching Personalization

Ensure that your visitors see only the most relevant content based on page URLs they visit.

#### 1. Go to Personalization and click 'ADD SEGMENT' to launch a new segment

![Click 'ADD SEGMENT' ](/files/-LT6XG8ZtFkS0SI8e_aV)

#### 2. Enter the URL for which you wish to personalize the content and click 'Next'

![2. Enter the desired URL and click 'Next'](/files/-LT6XRz8ojiwG26TyhGt)

#### 3. Select the category to be shown on the URL and click 'LAUNCH SEGMENT'

![3. Select 'Category' and click 'LAUNCH SEGMENT'](/files/-LT6XVr8H75lbPetTvEP)

## That's it! You just launched a new segment

![Your new segment is ready to go!](/files/-LT6ZQsgdtOR99LqV940)


# Integrating with Wordpress

Setting up Airim on Wordpress is extremely easy. You just need to paste your unique Airim code in your website footer just below the `</body>` tag

To register and get the code, follow Steps 1-4. If you already have the code, go directly to Step 5.

1. [Login](https://app.airim.co/login) to your Airim account, or [Sign up for Free](https://app.airim.co/signup) if you don't have one.<br>
2. You will reach your Dashboard. From the icons on the menu to your left, click **Settings**\
   \
   &#x20;<img src="/files/-LX3Lk-KXYsfNeRP3Ydd" alt="" data-size="original"> <br>
3. From your Settings page, click **JavaScript Code**\
   \
   &#x20;<img src="/files/-LX3MUz3ZXrFchwBVUNX" alt="" data-size="original"> <br>
4. There's your unique code! Scroll down and click **COPY CODE**\
   \
   &#x20;<img src="/files/-LX3Nkt8lyCXVW_vmxAV" alt="" data-size="original"> <br>
5. Login your to Wordpress account by going to your **sitename/wp-admin**\
   \
   &#x20;<img src="/files/-LX3P7BG6BO76J4EOwaX" alt="" data-size="original"> <br>
6. From the menu to your left, select **Appearance** and click **Editor**\
   \
   &#x20;<img src="/files/-LX3PpA8EKwQSCWIt4JA" alt="" data-size="original"> <br>
7. If asked for Heads Up, click "**I Understand**". Else, go to next step\
   \
   &#x20;<img src="/files/-LX3QuVYmGTH8M-_TD1K" alt="" data-size="original"> <br>
8. From the menu on your *right*, click **Theme Footer (footer.php)**\
   \
   &#x20;<img src="/files/-LX3RrNRrTH9DIN0xMzr" alt="" data-size="original"> <br>
9. Scroll down until you see `</body>`. Paste the code right after that.\
   \
   &#x20;<img src="/files/-LX3SzZ9Sf0HzB3Nwm-Z" alt="" data-size="original"> <br>
10. Click **Update File** and voila! you are done :smiley:&#x20;


# Adding CTAs to FAQs

You can improve click through rates to your individual pages by adding a Call-To-Action (CTA) at the end of your FAQs.

CTAs help in:&#x20;

* Giving link to a detailed article (Example: "Learn More")
* Improving navigation (Example: "View Pricing")
* Creating an urgency (Example: "Sign up Now")
* Promoting an offer (Example: "Click here for discount")

Adding a CTA is simple.&#x20;

1. Log in to your Airim account and click the **Content Manager** icon from the menu on your left\
   \
   &#x20;<img src="/files/-LX4xiw5COL3s-6VTPJz" alt="" data-size="original"> <br>
2. Click the FAQ in which you wish to add the CTA<br>
3. You will be taken to the section called "**Compose the FAQ**" by default. You will see a field for Question and another for Answer. Scroll down to see **Call To Action**. If you scroll down further, you will see "**On Clicking The CTA**", followed by "**Take user to link**".\
   \
   &#x20;<img src="/files/-LX4zdytzPg1Xn5pwHvH" alt="" data-size="original"> <br>
4. Under **Call To Action**, write the text you wish to show the user (example "Sign Up" or "Learn More"). You can also choose a text from the dropdown list that appears automatically.\
   \
   &#x20;<img src="/files/-LX5-OzuzcvjBugFCxJX" alt="" data-size="original"> <br>
5. Now enter the link you wish to take the user to when they click on the CTA\
   \
   &#x20;<img src="/files/-LX5-mqRLSJDEMhe2lWa" alt="" data-size="original"> \
   \
   You can enter the URL to an external website too, by pasting the complete link (like <https://trello.com/b/s4ogkn1O/airim-roadmap>)\
   \
   But if you are taking the user to some place within your own website, you may either enter the full URL or just start the link name with a **/**<br>
6. Click **Update CTA** to save. Then go to top right and click "**Update**". This will save the FAQ.\
   \
   &#x20;<img src="/files/-LX51Lfc2yYW8Bhe1z9J" alt="" data-size="original"> <br>
7. Your users will now be able to see the CTA when they click the article in Airim widget.<br>


# Embeddables

### FAQs Embeddable

To show FAQs anywhere in your page you can use airim's FAQ Embeddable element.&#x20;

First you have to include the following script. Preferable inside the head tag of your page.

```markup
<script src="https://cdn.airim.co/airim-suggest.dist.js" async></script>
```

Then you can place the following tag anywhere in your page. &#x20;

```markup
<airim-suggest aid="your_account_id"></airim-suggest>
```

The element will automatically show top 10 FAQs for that page. It will auto adjust its font, width and background colour according the to page and its parent element.

#### Getting your account id

You can find your account id [here](https://app.airim.co/home/settings/widget/jscode). Screenshot below for reference

![airim account id](/files/-LbO1AGRMZ9JzMFjIhY8)

#### Customising the embed

There are more options that is supported by the suggest element. See reference below

```markup
You can limit the number of FAQs shown by the widget by using
the limit attribute
<airim-suggest aid="your_account_id" limit="7"/>

You can change the color of the text by using the color attribute.
The attribute can be any valid hex code.
<airim-suggest aid="your_account_id" limit="7" color="#4c4c4c"/>

Chainging font size
<airim-suggest aid="your_account_id" limit="7" color="#4c4c4c" fontSize="18"/>
```


# Integrating with Zendesk

How to integrate Airim with Zendesk?

## 1. Go to Select > Integrations > Zendesk

![](/files/-LR821mUTJSScmuLkXfs)

## 2. Enter Domain and API Key&#x20;

![](/files/-LR82ntXIyaplzUnUjKA)

Do not forget to save your integration details :)


# Integrating with Live Chat

How to Integrate Airim with a live chat solutions such as Tawk.to?

## Getting started with Tawk.to&#x20;

Firstly, please ensure that both Tawk.to's and Airim's script are copied on your website

Then in Airim dashboard, go to Settings -> Contact Options -> Live Chat.&#x20;

![Step 1: Select 'Live Chat' option](/files/-LR7X1LHi_iieYPQj0e8)

## Activating "Tawk.to"

Select Tawk.to from the Chat applications and click 'Activate' to get the integration up and running.

![](/files/-LR7ZlOcwaFmnw4fMkT6)

## To ensure seamless integration

Copy the following code snippet just below the tawk.to js snippet. This will ensure that, tawk.to widget is hidden when minimized and Airim widget is shown again.

```javascript
Tawk_API.onChatMinimized = function(){
    window.Tawk_API.toggleVisibility();
    airim("widgetShow");
};
```

Similarly, we integrate with other Live Chat solutions such as ConvertFox, Crisp, Drift, Freshchat, Intercom, LiveAgent, Olark and Zendesk Chat.


# Integrating Custom Live Chat

First step is to go to [Settings](https://app.airim.co/home/settings) -> [Contact Options](https://app.airim.co/home/settings/contact) -> Live Chat and select **Custom Application.** Click Activate to save the configuration.&#x20;

Airim provides a simple API for integration of your custom live chat solution.&#x20;

One of the possible flow for integration is given below:

1. User sees Airim widget
2. User interacts with Airim widget and clicks the live chat icon
3. Third party live chat software is opened&#x20;
4. User closes the live chat, hiding the live chat and showing Airim

You can integrate your own live chat application using the code below :&#x20;

```javascript
 window.airim('on','liveChatClick',function(){
   openLiveChatApplication();
   // hide the airim widget so it does not overlap with the live chat
   window.airim('widgetHide');
})
```

Optionally you can also show the airim widget icon when the user closes the live chat application using a callback that the third party application provides.

```javascript
function liveChatCloseCallback(){

    // this line of code shows the airim widget icon
    window.airim('widgetShow');
}
```

## Examples

### Freshchat Integration

First step is to go to [Settings](https://app.airim.co/home/settings) -> [Contact Options](https://app.airim.co/home/settings/contact) -> Live Chat and select **Custom Application.**&#x20;

Click Activate to save the configuration.&#x20;

You can directly copy paste the code below to integrate with Freshchat. You can add this code at the end of you HTML file after the \<body> tag.

```markup
<script>
    window.fcWidget.on("widget:loaded", function(resp) {
      window.fcWidget.hide();
    });
    airim('on','liveChatClick',function(){
        window.fcWidget.show();
        window.fcWidget.open();
        airim('widgetHide');
    });
    window.fcWidget.on("widget:closed", function(resp) {
      window.fcWidget.hide();
      airim('widgetShow');
    });
</script>
```

### Chaport Integration

First step is to go to [Settings](https://app.airim.co/home/settings) -> [Contact Options](https://app.airim.co/home/settings/contact) -> Live Chat and select **Custom Application.**&#x20;

Click Activate to save the configuration.&#x20;

You can directly copy paste the code below to integrate with Chaport.

```markup
 <script type="text/javascript">
    // hide the launcher on load so that only airim is visible
    window.chaport.on('ready', function () {
        window.chaport.hideLauncher();
    })
    // open chaport when live chat button is clicked
    // hide the airim widget after opening 
    window.airim('on','liveChatClick',function(){
        window.chaport.open();
        window.airim('widgetHide');
    })
    // show the airim widget when the chaport widget is closed
    window.chaport.on('widget.stateChange', function(state){
        if(state.toState == 'collapsed'){
            window.chaport.hideLauncher();
            window.airim('widgetShow')
        }
    })
</script>
```

### Intercom Integration

First step is to go to [Settings](https://app.airim.co/home/settings) -> [Contact Options](https://app.airim.co/home/settings/contact) -> Live Chat and select **Custom Application.**&#x20;

Click Activate to save the configuration.&#x20;

You can directly copy paste the code below to integrate with Intercom.&#x20;

Please make sure you have added the Intercom JS and Airim JS

```markup
<script type="text/javascript">
// copy paste below both airim and intercom js scripts 
// hide the launcher on load so that only airim is visible
Intercom('update', {
  "hide_default_launcher": true
});
// open Intercom when live chat button is clicked
// hide the airim widget after opening 
window.airim('on','liveChatClick',function(){
    Intercom('show');
    window.airim('widgetHide');
})
// show the airim widget when the Intercom widget is closed
Intercom('onHide', function() {
    window.airim('widgetShow')
});
</script>
```

### ConvertFox / Gist Integration

First step is to go to [Settings](https://app.airim.co/home/settings) -> [Contact Options](https://app.airim.co/home/settings/contact) -> Live Chat and select **Custom Application.**&#x20;

Click Activate to save the configuration.&#x20;

You can directly copy paste the code below to integrate with ConvertFox.&#x20;

Please make sure you have added the ConvertFox JS and Airim JS

```markup
<script type="text/javascript">
// copy paste below both airim and convertfox js scripts 
// hide the launcher on load so that only airim is visible
convertfox.chat('hide')
// open ConvertFox widget when live chat button is clicked
// hide the airim widget after opening 
window.airim('on','liveChatClick',function(){
    convertfox.chat('openNewConversation');
    window.airim('widgetHide');
})
</script>
```

### Drift Chat Integration

First step is to go to [Settings](https://app.airim.co/home/settings) -> [Contact Options](https://app.airim.co/home/settings/contact) -> Live Chat and select **Custom Application.**&#x20;

Click Activate to save the configuration.&#x20;

You can directly copy paste the code below to integrate with Drift.&#x20;

Please make sure you have added the Drift JS snippet and Airim JS snippet above the following code

```markup
 <script>
    drift.on('ready',function(api){
        // hide the drift widget when it first loads
        api.widget.hide()
        // show the widget when you click the live chat Icon in airim
        airim('on','liveChatClick',function(){
          api.sidebar.open()
          airim('widgetHide')
        })
        // hide the widget when you close the sidebar and show airim icon
        drift.on('sidebarClose',function(e){
            api.widget.hide()
            airim('widgetShow')
        })
    })
</script>
```


# Integrating with Zapier

Airim integrates with Zapier to send all your leads to via webhooks/api. Zapier is a third party software that specialises in connecting software together. You can connect up to, and automatically send your collected data to Google Sheets, Gmail, Amazon S3, Dropbox, MySQL, and Quickbooks to name a few.

1\. Login to your Zapier Account and click on Dashboard. Then click on "Make a new zap". It will bring you to a page where you can search for your trigger action. This is where you will search and select "Webhooks by Zapier"

2\. Select "Catch hook" option and continue

3\. You will see a "Pick off a Child Key" step, you can skip this step and click continue

4\. You will now see a webhook url and "Copy to clipboard button". Copy the url and paste it in Airim.

1. Go to the Airim dashboard
2. Click on the [settings](http://help.airim.co/d/airim.co/settings) icon ( left navigation )&#x20;
3. Click on the Integrations&#x20;
4. Click Webhooks tab
5. Paste the Zapier webhook url
6. Click Save

Now set up the next step based on which app you want to connect

The api sends the following keys \* (all fields in the contact form)

* name
* phone
* url
* message

You can read up on Zapier webhooks [here](https://zapier.com/help/webhooks/)

If you want further help in api integrations you can contact us at <support@airim.co> with subject "API integrations - Zapier


# ConvertFox (Gist) KB integration

You can now import your knowledge base into Airim's content manager from ConvertFox in seconds! Here's how.

Knowledge base imports can be managed via [Content Manager](https://app.airim.co/home/faqsManager/).

**Step1:**

To import articles from your ConvertFox / Gist account, click "**Import FAQs**" and from the dropdown list, select "**ConvertFox / Gist**".

**Step 2:**

Enter the complete **URL** of your Support page and click "**Import**".

After a few seconds, you will be able to view all articles in your Content Manager.


# LiveAgent KB integration

You can now import your LiveAgent knowledge base into Airim's content manager in seconds! Here's how.

Knowledge base imports can be managed via [Content Manager](https://app.airim.co/home/faqsManager/).

**Step1:**

To import articles from your LiveAgent account, click "**Import FAQs**" and from the dropdown list, select "**LiveAgent**".

**Step 2:**

Enter the complete **URL** of your Support page

**Step 3:**

Enter your LiveAgent API key and click **"Import**".

After a few seconds, you will be able to view all articles in your Content Manager.


# ConvertFox / Gist Chat integration

**Step 1:**

First, check if both ConvertFox and Airim's script are copied on your website

**Step 2:**

Then, from your Airim dashboard, go to "**Settings**" -> "[**Contact Options**](https://app.airim.co/home/settings/contact)" and select "**Live Chat**"

**Step 3:**

Select ConvertFox from the Chat applications list and click '**Activate**' to enable the integration.

**Step 4:**

Paste the following code snippet just below the ConvertFox js snippet. This will ensure that ConvertFox widget is hidden when minimized and Airim widget is shown again.

```
<script type="text/javascript">
// copy paste below both airim and convertfox js scripts 
// hide the launcher on load so that only airim is visible
convertfox.chat('hide')
// open ConvertFox widget when live chat button is clicked
// hide the airim widget after opening 
window.airim('on','liveChatClick',function(){
    convertfox.chat('openNewConversation');
    window.airim('widgetHide');
})
</script>
```

Your users will now be able to view ConvertFox widget when they click the chat icon from your Airim widget.


# Google Analytics

You can send all airim events to ga by adding this snippet below the airim js code

```javascript
airim('subscribe', function(event){
  if (typeof(ga) === 'function') {
    ga('send', 'event', 'airim', event.event_name, event.event_value);
  }
})
```

If you are using gtag.js - Google Tag Manager instead of google analytics script, please use the code below

```javascript
airim('subscribe', function(event){
  if (typeof(gtag) === 'function') {
    gtag('event', event.event_name, {
      'event_category': 'airim',
      'event_label': event.event_value,
    });
  }
});
```

Event name is what type of action has been performed on the widget. Event value if any is the identification number on which the action is performed. Example: event\_name = faq\_click, and event\_value = 39. Id of the FAQ which is clicked.

#### Sample Event&#x20;

```javascript
{    
    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?"    
}
```

#### List of event names

* faq\_click
* upvoted\_faq
* cta\_click
* downvoted\_faq
* search
* tag\_search
* contact\_form\_open
* notification\_cta\_click
* widget\_open
* widget\_close
* airim\_live\_chat\_open
* live\_chat\_agent\_blocked&#x20;
* live\_chat\_agent\_snoozed
* live\_chat\_agent\_resolved
* live\_chat\_agent\_status
* live\_chat\_agent\_assigned
* live\_chat\_tat


# Custom Analytics

You can send all airim events to your custom analytics tool by adding this snippet below the airim JavsScript code. Please modify the script accordingly.

```javascript
airim('subscribe', function(event){
    myCustomAnalytics('airim', event.event_name, event.event_value);
})

function myCustomAnalytics(source,event_name,event_value){
 customAnalytics.send(source,event_name,event_value);
}
```

Event name is what type of action has been performed on the widget. Event value if any is the identification number on which the action is performed. Example: event\_name = faq\_click, and event\_value = 39. Id of the FAQ which is clicked.

#### Sample Event&#x20;

```javascript
{    
    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?"    
}
```

#### List of event names

* faq\_click
* upvoted\_faq
* cta\_click
* downvoted\_faq
* search
* tag\_search
* contact\_form\_open
* notification\_cta\_click
* widget\_open
* widget\_close
* airim\_live\_chat\_open
* live\_chat\_agent\_blocked&#x20;
* live\_chat\_agent\_snoozed
* live\_chat\_agent\_resolved
* live\_chat\_agent\_status
* live\_chat\_agent\_assigned
* live\_chat\_tat


# Google Tag Manger

To add airim in your Google Tag Manger:

1. Go to [T](https://tagmanager.google.com/#/home)ag Manager: [https://tagmanager.google.com/](https://tagmanager.google.com/#/home)
2. Click **Tags** ![and then](https://lh3.googleusercontent.com/nHFGZ_9xjCh-mP83zMzXQVJF5VYf2n6kwoBIxB2zv3V4VPT4gNTtBye8lYznogLqLPY=h18) **New**.
3. Click **Tag Configuration** and select **Custom HTML**.
4. Copy the tag code provided from and paste it into the HTML field


# 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.&#x20;

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)
```


# Using Iframe mode

## Iframe mode

Iframe mode loads the widget in an iframe with source set to cdn.airim.co. This is for additional security as the iframe which loads is from another domain, it cannot access elements from the parent window.

```markup
<script type="text/javascript">
!function(t,n,i,c,r){t.AirimObj=r,t[r]=t[r]||function(){(t[r].q=t[r].q||[]).push(arguments)},e=n.createElement("script"),x=document.getElementsByTagName("script")[0],e.async=1,e.src="https://cdn.airim.co/widget.js",x.parentNode.insertBefore(e,x)}(window,document,0,0,"airim");
airim('mode','iframe') // important to be before init function
airim('init','<your_account_id>');   // dont forget to replace account id from settings page
</script>
```

To obtain your javascript code click [here](https://app.airim.co/home/settings/widget/jscode). Add the snippet `airim('mode','iframe')` before the init call