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