- Import widget script:
<script defer data-nc-token="{YOUR_TOKEN}" src="/widget" type="text/javascript"></script>
- Construct the html
<body>
<div id="chat-parent">
<div id="chat-element"></div>
<div>
</body>
- Style up the parent element
#chat-parent {
width: 200px;
height: 400px;
}
// chat-element will assume 100% of width and height of it's parent, meaning that the only relevant style to control size is applied directly on the parent element
- Init widget on your code (On page load):
(function (window) {
window.onload = function () {
window.initNCWidget({
"targetEl": "#chat-element",
"defaultLanguage": "pt-BR"
});
};
}(window));
4 (ALTERNATIVE). Init widget on your code (e.g upon a button click):
(function (window) {
document.querySelector("#button-element").onclick = function () {
window.initNCWidget({
"targetEl": "#chat-element",
"defaultLanguage": "pt-BR"
});
};
}(window));
<body>
<div id="chat-parent">
<div id="chat-element"></div>
<div>
<button id="button-element"> Open chat </button>
</body>