Integrating Insight Advisor Chat into a mashup

This topic describes how to integrate the Insight Advisor (IA) chat feature into a mashup using Dev Hub. For the sake of simplicity, the following procedures create a blank mashup with a focus on IA chat integration.

Integrate the IA Chat component into a mashup with a default button

Follow these steps if you want to launch an IA chat window in a mashup using a default Ask Insight Advisor button.

Open Dev Hub.
See Launching Dev Hub.
Click Create new mashup and fill in the details.
Name the visualization extension IAChatMashup. Select the Basic mashup template and click Create & edit.
The new visualization extension is created and opens automatically in the Preview tab.
Click on the IAChatMashup.html tab and add the following line of code within the <body> tag:
```
<div id="IAChatToggle" style="position:fixed;top:0"></div>
```

Click on the IAChatMashup.js tab and add the following lines of code at the end of the file:

require( ["hub/external/hubchat/hub-chat-ui"], function ( hubChat ) {    
    hubChat.default.init({
        selector: '#IAChatToggle',
        host: (config.isSecure ? "https://" : "http://") + window.location.hostname,
        vpName: prefix !== '/' ? prefix.slice(0,-1) : '',
        mashupConfig: {
            chatWindow: false,
            hideCloseButton: false,
            useMashupStyle: true,
        },
        hasBeenRendered: function() {
            $('.chat-toggle-windows').removeClass('ant-btn');
        }
    });
});

Configure the mashupConfig object properties to control the behavior of the Insight Advisor Chat window.
- chatWindow: Set to false if you want the Ask Insight Advisor button to be visible in the mashup. You must click the button to open the chat window. If set to true, the chat window opens automatically when the mashup is loaded and the closing event is disabled when clicking outside of the chat window. Default: false
- hideCloseButton Set to false to show the close (x) button in the chat window. If set to true, the close button is hidden. Default: false
- useMashupStyle Set to true to apply uniform CSS to the UI. Default: false
Click on the Preview tab and then click the Ask Insight Advisor button. The Insight Advisor Chat window opens.

Integrate the IA Chat component into a mashup with a custom button

Follow these steps if you want to launch an IA chat window in a mashup using a custom button.

Open Dev Hub.
See Launching Dev Hub.
Click Create new mashup and fill in the details.
Name the visualization extension IAChatMashup. Select the Basic mashup template and click Create & edit.
The new visualization extension is created and opens automatically in the Preview tab.

Click on the IAChatMashup.html tab and add the following lines of code within the <body> tag:

<div id="IAChatToggle" style="position:fixed;top:0"></div>
<button id='chatModelId' type="button" class="lui-button" style="position:fixed;top:0;right:0;">Custom Button</button>

Click on the IAChatMashup.js tab and add the following lines of code at the end of the file:

require( ["hub/external/hubchat/hub-chat-ui"], function ( hubChat ) {
    var openHubChat = hubChat.default.init({
        selector: '#IAChatToggle',
        host: (config.isSecure ? "https://" : "http://") + window.location.hostname,
        vpName: prefix !== '/' ? prefix.slice(0,-1) : '',
        mashupConfig: {
            chatWindow: false,
            hideCloseButton: false,
            useMashupStyle: true,
        },
        hasBeenRendered: function() {
            $('.chat-toggle-windows').removeClass('ant-btn');
            $('.chat-toggle-windows').remove();
        }
    });
       
    $('#chatModelId').click(openHubChat);
});

Click on the Preview tab and then click the custom button. The Insight Advisor Chat window opens.

Did this page help you?

If you find any issues with this page or its content – a typo, a missing step, or a technical error – let us know how we can improve!

Leave your feedback here