Post-processing styling is a way for any user of Modern Chat to customize the styling of the Modern Chat Widget on their website.

Since the HTML structure of the Brand Messenger Legacy Modern Chat may change over time, this method of styling is to be used at owner discretion.

However, in certain cases, post-processing styling can be an effective way to make minor styling adjustments that go beyond the settings a Theme can provide.

In order to accomplish this, JavaScript needs to be added on the website that will change the styling on certain events. The khorosFirstMessageChatInitiated and khorosInit events will be used to make changes to the First Message Chat and Modern Chat Widget, respectively.

Example: Adjusting Widget Location

In this example, we will change the positioning of the Modern Chat Widget. This can be an important step if your site's design includes elements that sit in the same default space as the Modern Chat widget, such as a to-top button.

We will be able to target the Modern Chat Widget only after the khorosInit event has fired. Once that happens, we can target the element and make modifications to the style.

Option 1: Pass in an Attribute

To assign an explicit zIndex, pass in a messengerStyle attribute to your config. This option will only target the Modern Chat Widget element, and therefore cannot be used to target any other specific elements. This option can be used for zIndex only.

<script>
window.KHOROS_CONFIG = {
    companyKey: '[COMPANY KEY]',
    appId: '[APP_ID]',
    widgetId: '[WIDGET_ID]',
    messengerStyle: {
        zIndex: '999'
    }
};
</script>

Option 2: Element ID

Explicitly look up the element id and modify the style. (see Example 2)

window.addEventListener('khorosInit',
    function() {
        const modernChatWidget = document
            .getElementById('web-messenger-container');

        modernChatWidget.style.bottom = '100px';
        modernChatWidget.style.right = '200px';
        modernChatWidget.style.zIndex = '999';
    });

Example: Setting a Custom Font

One common example of post-processing styling is the replacement of the Modern Chat Widget's font with a custom font that better fits the brand and flow of the page.

Here is a quick and easy way to accomplish this:

window.addEventListener('khorosInit',
    function() {
        var modernChatWidget = document
            .getElementById('web-messenger-container');
        var container = modernChatWidget.contentDocument.getElementById('container');

        container.style.fontFamily = "Times New Roman";
    });

Example: Styling a Widget Element

In this example, we will change the background color of the text box on the Modern Chat Widget First Message Chat.

It's important to note here that post-processing styling is different from the configuration of the theme. There is no coding work required to configure the theme of the Modern Chat widget. We outline how this is accomplished in Khoros Atlas.

The best use case for this particular example of post-processing styling is to adjust an element that is not already covered by the Theme.

In this example, we're targeting the first message chat text box. This element isn't targetable until after the khorosFirstMessageChatInitiated event has fired. Once that happens, we can target the element and make modifications to its style.

This example only targets one element. You will need to inspect and explicitly look at the HTML to determine what element(s) you want to target.

window.addEventListener('khorosFirstMessageChatInitiated',
    function() {
        const modernChatWidget = document
            .getElementById('web-messenger-container');

        const firstChatTextBox = modernChatWidget
            .contentWindow
            .document
            .getElementById('khoros-responseInput');

        firstChatTextBox.style.backgroundColor = 'grey';
    });

The script above should do the trick! It will listen for the khorosFirstMessageChatInitiated event to fire, then it finds the appropriate element and changes its backgroundColor to grey.

Positioning

You can configure the bottom and right position properties for the widget's button mode within the Theme properties.