jungleBadger/HowToNCCloud.md

## HowToNCCloud.md

      
    Raw
  

              HowToNCCloud.md
            
          
    How to Run NC Cloud widget


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>