Airim Documentation
1.0.0
1.0.0
  • Welcome to Airim Docs !
  • Getting Started
    • Customizing Contact Form
    • Adding FAQs one-by-one
    • Importing FAQs
    • Adding Team Members
    • Customising Airim's Appearance
    • Taking Airim Live
    • Adding Vernacular Content
    • Enable or Disable Airim
    • Launching Personalization
    • Integrating with Wordpress
    • Adding CTAs to FAQs
    • Embeddables
  • Integrations
    • Integrating with Zendesk
    • Integrating with Live Chat
    • Integrating Custom Live Chat
    • Integrating with Zapier
    • ConvertFox (Gist) KB integration
    • LiveAgent KB integration
    • ConvertFox / Gist Chat integration
    • Google Analytics
    • Custom Analytics
    • Google Tag Manger
  • Widget API
    • JavaScript ( Web )
    • Using Iframe mode
Powered by GitBook
On this page
  • Examples
  • Freshchat Integration
  • Chaport Integration
  • Intercom Integration
  • ConvertFox / Gist Integration
  • Drift Chat Integration

Was this helpful?

  1. Integrations

Integrating Custom Live Chat

PreviousIntegrating with Live ChatNextIntegrating with Zapier

Last updated 6 years ago

Was this helpful?

First step is to go to -> -> Live Chat and select Custom Application. Click Activate to save the configuration.

Airim provides a simple API for integration of your custom live chat solution.

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

  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 :

 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.

function liveChatCloseCallback(){

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

Examples

Freshchat Integration

Click Activate to save the configuration.

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.

<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

Click Activate to save the configuration.

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

 <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

Click Activate to save the configuration.

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

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

<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

Click Activate to save the configuration.

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

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

<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

Click Activate to save the configuration.

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

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

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

First step is to go to -> -> Live Chat and select Custom Application.

First step is to go to -> -> Live Chat and select Custom Application.

First step is to go to -> -> Live Chat and select Custom Application.

First step is to go to -> -> Live Chat and select Custom Application.

First step is to go to -> -> Live Chat and select Custom Application.

Settings
Contact Options
Settings
Contact Options
Settings
Contact Options
Settings
Contact Options
Settings
Contact Options
Settings
Contact Options