Display the widget in your own div wrapper

Out of the box, the contextual help widget will open the widget in a div on the righthand side of the page, overlying the content there in a div that runs the full height of the screen.

If you have top navigation or some other layout that this full-height righthand behavior isn't ideal, create your own div to set the height and placement of the widget.

You'll be flying solo
Only use this option if you have your own developer resources; our support team won't set up or troubleshoot custom wrapper installations. For further customizations to widget size, behavior, and functioning, we recommend creating your own widget leveraging our API rather than our pre-built widget.

To wrap the widget in your own div:

Create the div to house the widget and style it as you'd like.

Wrapper cannot change widget width
The widget width is always set to 370px, even within the wrapper.
Copy the code below and paste it into your widget embed code below the base_url:
```
_ko19.containerId = "my-custom-div-id";
```
Change "my-custom-div-id" to the id of the wrapper div you created.

For example, here we reference a div with the ID of "widget-custom" on row 5:

<script type="text/javascript">
    var _ko19 = _ko19 || {};
    _ko19.__pc = '000000000000000000000-111111111111111111111111';
    _ko19.base_url = 'https://mykb.knowledgeowl.com';
    _ko19_containerId = "widget-custom";
    
    !function() {
        var ko = document.createElement('script');
        ko.type = 'text/javascript';
        ko.async = true;
        
        ko.src = _ko19.base_url + '/widget/load';
        document.head.appendChild(ko);
    }();    
</script>

Display the widget in your own div wrapper

Related Articles