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 the widget
4 Adding the code to your Refined site
5 Template code

Key points

To set up the widget for your Refined site:

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

Prerequisites

Start by creating a widget by going to Configuration > Widgets.

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.

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

Now that the widget is ready, you can deploy it by going to Configuration > Tenants > Deploy a Refined portal widget.

Select the widget (the one that points to Refined Portal (/refined-portal)) from the drop-down menu.
Click Refresh.
Copy the generated code.

Adding the code to your Refined site

Open your Refined admin view and go to Sites > Configuration.

Scroll down to the Custom code section.

4. Enable Custom HTML and JavaScript.

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

6. Click Save.

Now, the widget should be available on your portal.

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>