Refined sites widget

Refined is a tool for building branded help and support sites with custom looks, layouts, and navigation in the Atlassian environment. You can create a Koji widget for your Refined sites.

1 Key points
2 Prerequisites
3 Deploying a widget
4 Adding code to your Refined site
5 Template code
6 Tutorial

Key points

To set up the widget for your Refined site:

Create a widget in Koji’s back office and generate the code.
Add the generated code to your Refined site.

Prerequisites

As you need to select a widget for deployment, make sure you have created a widget. If you do not have a widget yet, go to Configuration > Widgets and create one.

1. Enter the name of your widget.

2. Enter the description.

3. In the Widget type field, select Chat.

4. In the Application field, select Refined Portal (/refined-portal).

5. Set the widget and button appearance and behavior. For more details, view this help page.

6. Click Save.

Ignore the code for embedding that is displayed on the right side of the window. You will copy it from another tool.

Deploying a widget

1. Go to DevOps > Channel Deployment > Deploy a Refined portal widget.

2. Select the widget (the one that points to Refined Portal (/refined-portal)) from the drop-down menu.

3. Click Refresh.

4. Copy the generated code.

Adding code to your Refined site

1. Open your Refined admin view and go to Sites > Advanced settings.

3. Navigate to the Advanced Settings section.

4. Enable Activate Custom HTML.

5. Paste the code that you generated earlier to the At the end of BODY field:

6. Click Save.

Template code

View the sample code for reference. Basically, your generated code will be similar to this sample.

<script type="text/javascript">
    KbotConfig = {
        baseUrl: 'https://kjira.konverso.ai/'
    }

    function KbotInit(userData) {
        Kbot.init({
            baseUrl: 'https://kjira.konverso.ai/'
        });

        Kbot.get().Widgets.initRemoteConfig('df16b0c7-f2c9-4cc0-a51d-a899fd8fe536', {
            widgetLocalId: 'refined-portal',
            configProcessor: (config) => Promise.resolve({
                ...config,
                authentication: {
                    external_system: 'refined',
                    payload: userData,
                },
            })
        })
    }

    function injectKbot(d, userData) {
        var n = d.getElementsByTagName('script')[0],
            s = d.createElement('script'),
            f = function () {
                n.parentNode.insertBefore(s, n);
            };
        s.type = 'text/javascript';
        s.async = true;
        s.src = KbotConfig.baseUrl + '/widget/js/widget.api.js?' + Math.random();
        s.onload = function () {
            if (!this.executed) {
                this.executed = true;
                KbotInit(userData);
            }
        }
        f();
    }

    fetch('/rest/latest/user/currentuser')
        .then(response => {
            if (response.status === 200) {
                return response.json();
            }
            return Promise.reject();
        }).then(data => injectKbot(document, data))
</script>

Tutorial

View the video that displays the process of configuring and adding a Koji widget to your Refined portal.