### Configure VWO A/B Testing Script Initialization

Source: https://www.nutrient.io/guides/document-authoring/working-with-documents/pdf

This JavaScript code snippet initializes the Visual Website Optimizer (VWO) for A/B testing. It defines account ID, version, and settings tolerance. The code checks for existing VWO settings in local storage and prepares to load the VWO library dynamically. It includes functions to manage script loading, retrieve settings, and handle the completion of the VWO setup. This setup is conditional and avoids conflicts if VWO is already present.

```javascript
window._vwo_code || (function() {
  var account_id = 892495,
    version = 2.1,
    settings_tolerance = 2000,
    hide_element = '', // Don't hide body to prevent flash
    hide_element_style = '',
    /* DO NOT EDIT BELOW THIS LINE */
    f = false,
    w = window,
    d = document,
    v = d.querySelector('#vwoCode'),
    cK = '_vwo_' + account_id + '_settings',
    cc = {};
  try {
    var c = JSON.parse(localStorage.getItem('_vwo_' + account_id + '_config'));
    cc = c && typeof c === 'object' ? c : {};
  } catch (e) {}
  var stT = cc.stT === 'session' ? w.sessionStorage : w.localStorage;
  var code = {
    nonce: v && v.nonce,
    library_tolerance: function() { return typeof library_tolerance !== 'undefined' ? library_tolerance : undefined },
    settings_tolerance: function() { return cc.sT || settings_tolerance },
    hide_element_style: function() { return '{' + (cc.hES || hide_element_style) + '}' },
    hide_element: function() { // Always return empty to prevent hiding
      return '';
    },
    getVersion: function() { return version },
    finish: function(e) {
      if (!f) {
        f = true;
        var t = d.getElementById('_vis_opt_path_hides');
        if (t) t.parentNode.removeChild(t);
        if (e) (new Image).src = 'https://dev.visualwebsiteoptimizer.com/ee.gif?a=' + account_id + e;
      }
    },
    finished: function() { return f },
    addScript: function(e) {
      var t = d.createElement('script');
      t.type = 'text/javascript';
      if (e.src) {
        t.src = e.src;
        t.async = true; // Make async
      } else {
        t.text = e.text;
      }
      v && t.setAttribute('nonce', v.nonce);
      d.getElementsByTagName('head')[0].appendChild(t);
    },
    load: function(e, t) {
      var n = this.getSettings(),
        i = d.createElement('script'),
        r = this;
      t = t || {};
      if (n) {
        i.textContent = n;
        d.getElementsByTagName('head')[0].appendChild(i);
        if (!w.VWO || VWO.caE) {
          stT.removeI
```

--------------------------------

### Open ChatGPT with Context - JavaScript

Source: https://www.nutrient.io/guides/document-authoring/working-with-documents/pdf

Opens a new browser tab with ChatGPT, pre-populating the query with context about the current Nutrient.io documentation page. The query asks for help understanding and using the documentation, prompting the AI to be ready for explanations, examples, or debugging assistance.

```javascript
function v(i){
  const t="https://www.nutrient.io",
  o=window.location.pathname,
  r=`I'm looking at this Nutrient documentation: ${`${t}${o}`} Help me understand how to use it. Be ready to explain concepts, give examples, or help debug based on it.`;
  s=`https://chatgpt.com/?q=${encodeURIComponent(r)}`;
  window.open(s,"_blank")
}
```

--------------------------------

### Install Nutrient SDK for Document Authoring

Source: https://www.nutrient.io/sdk/document-authoring/getting-started/using-npm

Installs the Nutrient SDK package specifically for document authoring using the Bun package manager. This is the initial step to begin using the SDK's features.

```bash
bun add @nutrient-sdk/document-authoring
```

--------------------------------

### Run Vite Development Server (pnpm)

Source: https://www.nutrient.io/sdk/document-authoring/getting-started/using-vite

This command starts the Vite development server using pnpm. The 'dev' script should be configured in your project's package.json.

```bash
pnpm run dev
```

--------------------------------

### Open ChatGPT with Context (JavaScript)

Source: https://www.nutrient.io/guides/document-authoring/about/browser-support

Opens ChatGPT in a new tab with a pre-filled prompt. The prompt includes the current page's URL and a request for assistance related to the documentation. This allows users to quickly get AI help based on the current context.

```javascript
function v(i){
    const t = "https://www.nutrient.io",
        o = window.location.pathname,
        r = `I'm looking at this Nutrient documentation: ${`${t}${o}`} Help me understand how to use it. Be ready to explain concepts, give examples, or help debug based on it.`;
    s = `https://chatgpt.com/?q=${encodeURIComponent(r)}`;
    window.open(s, "_blank")
}
```

--------------------------------

### Configure and Load Nutrient AI Widget (JavaScript)

Source: https://www.nutrient.io/guides/document-authoring/working-with-documents/pdf

This JavaScript function dynamically configures and loads the Nutrient AI widget. It determines the appropriate disclaimer and example questions based on the current URL path, then injects the script tag with all necessary attributes into the document. Dependencies include the browser's DOM manipulation capabilities.

```javascript
const n = {
  paths: {
    workflowPaths: ["/workflow-automation", "/guides/workflow-automation"],
    lowCodePaths: ["/low-code", "/guides/low-code", "/guides/document-converter", "/guides/document-editor", "/guides/document-searchability", "/guides/document-automation-server/"]
  },
  workflow: {
    modalDisclaimer: "This is a custom LLM for Nutrient with access to product information, the help center, as well as other resources. For best results please mention the product name when asking technical questions.",
    exampleQuestions: "What types of Workflow templates are available?,How to create a Workflow Form?"
  },
  lowCode: {
    modalDisclaimer: "This is a custom LLM for Nutrient with access to product information, the help center, as well as other resources. For best results please mention the product name when asking technical questions.",
    exampleQuestions: "Convert Documents to PDF with Power Automate?, How to secure Documents using Power Automate?"
  },
  default: {
    modalDisclaimer: "This is a custom LLM for Nutrient with access to product information, [guides]((https://www.nutrient.io/sdk/developers)), API reference as well as other resources. For best results please mention the product name when asking technical questions.",
    exampleQuestions: "How do I get started with the Web SDK?,What AI features does Nutrient offer?"
  }
};

function d() {
  const a = window.location.pathname;
  const t = Object.entries(n.paths).find(([o, r]) => r.some(s => a.startsWith(s)));
  const e = t ? t[0].replace("Paths", "") : "default";
  return e === "workflow" ? n.workflow : e === "lowCode" ? n.lowCode : n.default;
}

function u() {
  const a = d();
  const t = document.createElement("script");
  t.async = !0;
  t.src = "https://widget.kapa.ai/kapa-widget.bundle.js";
  t.setAttribute("data-website-id", "ec76a086-c5ce-409a-91bb-bee358fdb208");
  t.setAttribute("data-project-color", "#1A1414");
  t.setAttribute("data-text-color", "#1A1414");
  t.setAttribute("data-modal-override-open-id", "nutrient-sdk-docs-ai");
  t.setAttribute("data-button-hide", "false");
  t.setAttribute("data-modal-open-by-default", "true");
  t.setAttribute("data-user-analytics-fingerprint-enabled", "true");
  t.setAttribute("data-project-name", "Nutrient");
  t.setAttribute("data-modal-title", "Nutrient AI");
  t.setAttribute("data-modal-disclaimer", a.modalDisclaimer);
  t.setAttribute("data-modal-example-questions", a.exampleQuestions);
  t.setAttribute("data-modal-disclaimer-bg-color", "#EFEBE7");
  t.setAttribute("data-modal-disclaimer-text-color", "#67594B");
  t.setAttribute("data-modal-disclaimer-font-size", "14px");
  t.setAttribute("data-modal-disclaimer-padding", "0.875rem");
  t.setAttribute("data-query-input-font-size", "1rem");
  t.setAttribute("data-query-input-text-color", "#1A1414");
  t.setAttribute("data-query-input-placeholder-text-color", "#67594B");
  t.setAttribute("data-query-input-border-color", "#1A1414");
  t.setAttribute("data-query-input-focus-border-color", "#DE9DCC");
  t.setAttribute("data-submit-query-button-bg-color", "#1A1414");
  t.setAttribute("data-example-question-button-height", "40px");
  t.setAttribute("data-example-question-button-padding-x", "1.5rem");
  t.setAttribute("data-example-question-button-padding-y", "0.75rem");
  t.setAttribute("data-example-question-button-border", "1px solid #C2B8AE !important");
  t.setAttribute("data-example-question-button-border-radius", "8px");
  t.setAttribute("data-example-question-button-text-color", "#1A1414");
  t.setAttribute("data-example-question-button-box-shadow", "none");
  t.setAttribute("data-example-question-button-font-size", "0.875rem");
  t.setAttribute("data-example-question-button-hover-bg-color", "#EFEBE7");
  t.setAttribute("data-modal-z-index", "999999");
  t.setAttribute("data-modal-border-radius", "1.5rem");
  t.setAttribute("data-modal-header-bg-color", "#DE9DCC");
  t.setAttribute("data-modal-header-border-bottom", "none");
  t.setAttribute("data-modal-header-padding", "1.5rem");
  t.setAttribute("data-modal-title-font-weight", "400");
  t.setAttribute("data-modal-title-font-size", "1.5rem");
  t.setAttribute("data-modal-title-color", "#1A1414");
  t.setAttribute("data-button-text", "ASK AI");
  t.setAttribute("data-button-height", "5rem");
  t.setAttribute("data-button-width", "5rem");
  t.setAttribute("data-button-bg-color", "#1A1414");
  t.setAttribute("data-button-border-radius", "1rem");
  t.setAttribute("data-button-text-shadow", "none");
  t.setAttribute("data-button-text-font-weight", "400");
  t.setAttribute("data-button-text-font-size", "0.75rem");
  t.setAttribute("data-button-image-height", "1.5rem");
  t.setAttribute("data-button-image-width", "1.5rem");
  t.setAttribute("data-thread-clear-button-height", "40px");
  t.setAttribute("data-thread-clear-button-padding-x", "16px");
  t.setAttribute("data-thread-clear-button-padding-y", "8px");
  t.setAttribute("data-thread-clear-button-border", "none");
  t.setAttribute("data-thread-clear-button-border-radius", "8px");
  t.setAttribute("data-thread-clear-button-bg-color", "#EFEBE7");
  t.setAttribute("data-thread-clear-button-hover-bg-color", "#E2DBD9");
  t.setAttribute("data-thread-clear-button-text-color", "#1A1414");
  t.setAttribute("data-thread-clear-button-font-size", "12px");
  t.setAttribute("data-thread-clear-button-icon-size", "24px");
  document.body.appendChild(t);
}

// Example of how to call the function to load the AI widget:
// u();
```

--------------------------------

### Install Document Authoring via npm

Source: https://www.nutrient.io/sdk/document-authoring/getting-started/using-npm

Install the Document Authoring library using the npm package manager. This is the primary method for adding the library to your project for Node.js environments.

```bash
npm i @nutrient-sdk/document-authoring
```

--------------------------------

### Install Document Authoring via pnpm

Source: https://www.nutrient.io/sdk/document-authoring/getting-started/using-npm

Add the Document Authoring library to your project using the pnpm package manager. pnpm is known for its efficient disk space usage and faster installs.

```bash
pnpm add @nutrient-sdk/document-authoring
```

--------------------------------

### Open ChatGPT with Prompt

Source: https://www.nutrient.io/guides/document-authoring/self-hosting-assets

Opens a new tab with ChatGPT, pre-populated with a prompt related to the current Nutrient.io documentation page. The prompt asks for assistance in understanding and using the documentation, enabling users to get tailored help from the AI.

```javascript
function v(i){const t="https://www.nutrient.io",o=window.location.pathname,r=`I'm looking at this Nutrient documentation: ${`${t}${o}`} Help me understand how to use it. Be ready to explain concepts, give examples, or help debug based on it.`,s=`https://chatgpt.com/?q=${encodeURIComponent(r)}`;window.open(s,"_blank")}
```

--------------------------------

### CSPv2/CSPv1 Example Configuration

Source: https://www.nutrient.io/guides/document-authoring/content-security-policy-and-firewall-rules

This provides an example CSP configuration for older versions (CSPv2/CSPv1) that rely on source allowlisting instead of 'strict-dynamic'. It specifies the allowed source for scripts from a content delivery network. This is a fallback for applications that cannot use CSPv3 features.

```http
script-src:  https://document-authoring.cdn.nutrient.io
```

--------------------------------

### Open Claude.ai with Context - JavaScript

Source: https://www.nutrient.io/guides/document-authoring/working-with-documents/pdf

Opens a new browser tab with Claude.ai, pre-filling the prompt with context related to the current Nutrient.io documentation page. The prompt is designed to elicit assistance with understanding, using, or debugging the documentation content.

```javascript
function x(i){
  const t="https://www.nutrient.io",
  o=window.location.pathname,
  r=`I'm looking at this Nutrient documentation: ${`${t}${o}`} Help me understand how to use it. Be ready to explain concepts, give examples, or help debug based on it.`;
  s=`https://claude.ai/new?q=${encodeURIComponent(r)}`;
  window.open(s,"_blank")
}
```

--------------------------------

### Open Grok with Context - JavaScript

Source: https://www.nutrient.io/guides/document-authoring/working-with-documents/pdf

Opens a new browser tab with Grok, providing it with context about the current Nutrient.io documentation page. The pre-filled query asks for assistance with understanding, using, or debugging the documentation.

```javascript
function C(i){
  const t="https://www.nutrient.io",
  o=window.location.pathname,
  r=`I'm looking at this Nutrient documentation: ${`${t}${o}`} Help me understand how to use it. Be ready to explain concepts, give examples, or help debug based on it.`;
  s=`https://grok.com/c?q=${encodeURIComponent(r)}`;
  window.open(s,"_blank")
}
```

--------------------------------

### Initialize Document Ready Event Listeners (JavaScript)

Source: https://www.nutrient.io/sdk/document-authoring/getting-started/using-vite

Adds event listeners that execute once the Document Object Model (DOM) is fully loaded and parsed. It calls `I()` and `A()`, suggesting these functions handle UI setup or interactions that depend on the DOM's readiness.

```javascript
document.addEventListener("DOMContentLoaded",()=>{
  I(),
  A()
});
```

--------------------------------

### Open Grok with Context (JavaScript)

Source: https://www.nutrient.io/guides/document-authoring/about/browser-support

Opens Grok.com in a new tab with a pre-filled prompt. This function allows users to query Grok AI with context from the current Nutrient documentation page, providing a similar AI assistance flow as with ChatGPT and Claude.

```javascript
function C(i){
    const t = "https://www.nutrient.io",
        o = window.location.pathname,
        r = `I'm looking at this Nutrient documentation: ${`${t}${o}`} Help me understand how to use it. Be ready to explain concepts, give examples, or help debug based on it.`;
    s = `https://grok.com/c?q=${encodeURIComponent(r)}`;
    window.open(s, "_blank")
}
```

--------------------------------

### Import and Initialize Nutrient Document Authoring

Source: https://www.nutrient.io/sdk/document-authoring/getting-started/using-other-setups

This snippet shows how to import the `docauth.es.js` library and initialize the document authoring system. It demonstrates creating a document from plain text and initializing an editor instance with the created document. Dependencies include the Nutrient SDK, which should be installed via npm.

```javascript
const DocAuth = await import('/lib/docauth.es.js');
const docAuthSystem = await DocAuth.createDocAuthSystem()
const editor = await docAuthSystem.createEditor(document.getElementById('editor'),{
  document: await docAuthSystem.createDocumentFromPlaintext('Hi there!'),
})
```

--------------------------------

### Run Vite Development Server (npm)

Source: https://www.nutrient.io/sdk/document-authoring/getting-started/using-vite

This command initiates the Vite development server using npm. Ensure that 'dev' is defined as a script in your package.json file.

```bash
npm run dev
```

--------------------------------

### VWO Initialization and Script Loading (JavaScript)

Source: https://www.nutrient.io/sdk/document-authoring/getting-started/using-other-setups

This snippet handles the initialization of VWO. It fetches account settings, loads necessary scripts, and includes logic to defer initialization until the DOM is ready or during idle time to avoid blocking page rendering. It uses XMLHttpRequest for dynamic script loading.

```javascript
var _vwo_code = (function(){
  var cK = "_vwo_opt_exp_data_";
  var stT = window.localStorage;
  var d = document;
  var w = window;
  var account_id = 12345; // Replace with actual account ID
  var version = "2.0"; // Replace with actual version

  var code = {
    settings_tolerance: function(){
      var e = stT.getItem(cK);
      if(!e) {
        return 1000;
      }
      try {
        e = JSON.parse(e);
        if(Date.now() > e.e) {
          stT.removeItem(cK);
          return 1000;
        }
        return e.s;
      } catch(err) {
        return 1000;
      }
    },
    addScript: function(t) {
      var e = d.createElement('script');
      e.async = true;
      if (t.src) {
        e.src = t.src;
      }
      if (t.text) {
        e.text = t.text;
      }
      d.head.appendChild(e);
    },
    load: function(e, t) {
      t = t || {};
      if (t.useXHR) {
        var o = new XMLHttpRequest();
        o.open('GET', e, true);
        o.withCredentials = !t.disableCredentials;
        o.responseType = t.responseType || 'text';
        o.onload = function() {
          if (t.onloadCb) { return t.onloadCb(o, e); }
          if (o.status === 200 || o.status === 304) {
            _vwo_code.addScript({ text: o.responseText });
          } else {
            _vwo_code.finish('&e=loading_failure:' + e);
          }
        };
        o.onerror = function() {
          if (t.onerrorCb) { return t.onerrorCb(e); }
          _vwo_code.finish('&e=loading_failure:' + e);
        };
        o.send();
      } else {
        this.addScript({ src: e });
      }
    },
    getSettings: function() {
      try {
        var e = stT.getItem(cK);
        if (!e) { return; }
        e = JSON.parse(e);
        if (Date.now() > e.e) {
          stT.removeItem(cK);
          return;
        }
        return e.s;
      } catch (e) {
        return;
      }
    },
    init: function() {
      if (d.URL.indexOf('__vwo_disable__') > -1) return;
      var e = this.settings_tolerance();
      w._vwo_settings_timer = setTimeout(function() {
        _vwo_code.finish();
        stT.removeItem(cK);
      }, e);

      var o = w.location.search.indexOf('_vwo_xhr') !== -1 ? w._vis_opt_url || d.URL : d.URL;
      var s = 'https://dev.visualwebsiteoptimizer.com/j.php?a=' + account_id + '&u=' + encodeURIComponent(o) + '&vn=' + version;

      if (w.location.search.indexOf('_vwo_xhr') !== -1) {
        this.addScript({ src: s });
      } else {
        this.load(s + '&x=true');
      }
    }
  };

  w._vwo_code = code;

  // Defer initialization to prevent render blocking
  if (d.readyState === 'loading') {
    d.addEventListener('DOMContentLoaded', function() {
      code.init();
    });
  } else {
    // If DOM is already loaded, use requestIdleCallback or setTimeout
    if ('requestIdleCallback' in w) {
      requestIdleCallback(function() {
        code.init();
      }, { timeout: 1000 });
    } else {
      setTimeout(function() {
        code.init();
      }, 0);
    }
  }
})();
```

--------------------------------

### Initialize Document Actions

Source: https://www.nutrient.io/guides/document-authoring/intro

Initializes event listeners for various document actions when the DOM is fully loaded. This includes setting up click listeners for copy buttons, dropdown items, and 'view markdown' links, as well as keyboard listeners for accessibility on elements with IDs starting with 'markdown-actions-container-'.

```javascript
document.addEventListener("DOMContentLoaded",()=>{
  I(),
  A()
});
function I(){
  document.querySelectorAll('[id^="markdown-actions-container-"]').forEach(t=>{
    const o=t.getAttribute("aria-controls");
    if(!o)return;
    const e=document.getElementById(o),
    r=t.querySelector(".arrow-dropdown-icon");
    if(!e)return;
    t.addEventListener("click",function(n){
      n.stopPropagation(),
      t.getAttribute("aria-expanded")==="true"?s():a()
    }),
    t.addEventListener("keydown",function(n){
      if(n.key==="Enter"||n.key===" ")n.preventDefault(),t.getAttribute("aria-expanded")==="true"?s():a();
      else if(n.key==="ArrowDown"){
        n.preventDefault(),
        a();
        const c=e.querySelector(".markdown-actions-option");
        c&&c.focus()
      }
    }),
    e.addEventListener("click",function(n){
      n.target.closest(".markdown-actions-option")&&(n.preventD
```

--------------------------------

### Create Vite Project using Bun

Source: https://www.nutrient.io/sdk/document-authoring/getting-started/using-vite

Command to create a new Vite project using Bun. Bun is a new, fast JavaScript runtime and toolkit that includes a package manager.

```bash
bun create vite my-app
```

--------------------------------

### Copy Page Content to Clipboard - JavaScript

Source: https://www.nutrient.io/guides/document-authoring/working-with-documents/pdf

An asynchronous function that orchestrates the copying of the current page's Markdown content to the clipboard. It optionally accepts configuration for button/dropdown selectors, success/error messages, and reset delays. It utilizes `fetch` to get the Markdown content and `b()` to perform the copy operation, providing visual feedback through helper function `h()`.

```javascript
async function w(i={}){
  const{buttonSelector:t=".copy-page-btn",dropdownSelector:o=".copy-dropdown-item",successText:e="Copied",errorText:r="Error",resetDelay:a=2e3}=i;
  try{
    if(/^((?!chrome|android).)\*safari/i.test(navigator.userAgent)&&navigator.clipboard&&window.isSecureContext){
      const n=new ClipboardItem({"text/plain":fetch(`${window.location.pathname.replace(/\\/$/,"")}.md`).then(c=>{if(!c.ok)throw new Error("Failed to fetch");return c.text()}).then(c=>new Blob([c],{type:"text/plain"}))});
      await navigator.clipboard.write([n])
    }else{
      const n=await y();
      await b(n)
    }
    h(t,o,e,"btn-success",a)
  }catch(s){
    console.error("Error copying content:",s),
    h(t,o,r,"btn-error",a)
  }
}
```

--------------------------------

### Initialize Nutrient AI Chatbot Widget (JavaScript)

Source: https://www.nutrient.io/guides/document-authoring/intro

This JavaScript code dynamically configures and injects the Nutrient AI chatbot widget into a web page. It determines the appropriate disclaimer and example questions based on the current URL path, allowing for context-specific AI interactions. The script supports extensive customization of the widget's appearance and behavior through various data attributes.

```javascript
const n = {
    paths: {
        workflowPaths: ["/workflow-automation", "/guides/workflow-automation"],
        lowCodePaths: ["/low-code", "/guides/low-code", "/guides/document-converter", "/guides/document-editor", "/guides/document-searchability", "/guides/document-automation-server/"]
    },
    workflow: {
        modalDisclaimer: "This is a custom LLM for Nutrient with access to product information, the help center, as well as other resources. For best results please mention the product name when asking technical questions.",
        exampleQuestions: "What types of Workflow templates are available?,How to create a Workflow Form?"
    },
    lowCode: {
        modalDisclaimer: "This is a custom LLM for Nutrient with access to product information, the help center, as well as other resources. For best results please mention the product name when asking technical questions.",
        exampleQuestions: "Convert Documents to PDF with Power Automate?, How to secure Documents using Power Automate?"
    },
    default: {
        modalDisclaimer: "This is a custom LLM for Nutrient with access to product information, [guides]((https://www.nutrient.io/sdk/developers)), API reference as well as other resources. For best results please mention the product name when asking technical questions.",
        exampleQuestions: "How do I get started with the Web SDK?,What AI features does Nutrient offer?"
    }
};

function d() {
    const a = window.location.pathname,
        t = Object.entries(n.paths).find(([o, r]) => r.some(s => a.startsWith(s))),
        e = t ? t[0].replace("Paths", "") : "default";
    return e === "workflow" ? n.workflow : e === "lowCode" ? n.lowCode : n.default;
}

function u() {
    const a = d(),
        t = document.createElement("script");
    t.async = !0,
    t.src = "https://widget.kapa.ai/kapa-widget.bundle.js",
    t.setAttribute("data-website-id", "ec76a086-c5ce-409a-91bb-bee358fdb208"),
    t.setAttribute("data-project-color", "#1A1414"),
    t.setAttribute("data-text-color", "#1A1414"),
    t.setAttribute("data-modal-override-open-id", "nutrient-sdk-docs-ai"),
    t.setAttribute("data-button-hide", "false"),
    t.setAttribute("data-modal-open-by-default", "true"),
    t.setAttribute("data-user-analytics-fingerprint-enabled", "true"),
    t.setAttribute("data-project-name", "Nutrient"),
    t.setAttribute("data-modal-title", "Nutrient AI"),
    t.setAttribute("data-modal-disclaimer", a.modalDisclaimer),
    t.setAttribute("data-modal-example-questions", a.exampleQuestions),
    t.setAttribute("data-modal-disclaimer-bg-color", "#EFEBE7"),
    t.setAttribute("data-modal-disclaimer-text-color", "#67594B"),
    t.setAttribute("data-modal-disclaimer-font-size", "14px"),
    t.setAttribute("data-modal-disclaimer-padding", "0.875rem"),
    t.setAttribute("data-query-input-font-size", "1rem"),
    t.setAttribute("data-query-input-text-color", "#1A1414"),
    t.setAttribute("data-query-input-placeholder-text-color", "#67594B"),
    t.setAttribute("data-query-input-border-color", "#1A1414"),
    t.setAttribute("data-query-input-focus-border-color", "#DE9DCC"),
    t.setAttribute("data-submit-query-button-bg-color", "#1A1414"),
    t.setAttribute("data-example-question-button-height", "40px"),
    t.setAttribute("data-example-question-button-padding-x", "1.5rem"),
    t.setAttribute("data-example-question-button-padding-y", "0.75rem"),
    t.setAttribute("data-example-question-button-border", "1px solid #C2B8AE !important"),
    t.setAttribute("data-example-question-button-border-radius", "8px"),
    t.setAttribute("data-example-question-button-text-color", "#1A1414"),
    t.setAttribute("data-example-question-button-box-shadow", "none"),
    t.setAttribute("data-example-question-button-font-size", "0.875rem"),
    t.setAttribute("data-example-question-button-hover-bg-color", "#EFEBE7"),
    t.setAttribute("data-modal-z-index", "999999"),
    t.setAttribute("data-modal-border-radius", "1.5rem"),
    t.setAttribute("data-modal-header-bg-color", "#DE9DCC"),
    t.setAttribute("data-modal-header-border-bottom", "none"),
    t.setAttribute("data-modal-header-padding", "1.5rem"),
    t.setAttribute("data-modal-title-font-weight", "400"),
    t.setAttribute("data-modal-title-font-size", "1.5rem"),
    t.setAttribute("data-modal-title-color", "#1A1414"),
    t.setAttribute("data-button-text", "ASK AI"),
    t.setAttribute("data-button-height", "5rem"),
    t.setAttribute("data-button-width", "5rem"),
    t.setAttribute("data-button-bg-color", "#1A1414"),
    t.setAttribute("data-button-border-radius", "1rem"),
    t.setAttribute("data-button-text-shadow", "none"),
    t.setAttribute("data-button-text-font-weight", "400"),
    t.setAttribute("data-button-text-font-size", "0.75rem"),
    t.setAttribute("data-button-image-height", "1.5rem"),
    t.setAttribute("data-button-image-width", "1.5rem"),
    t.setAttribute("data-thread-clear-button-height", "40px"),
    t.setAttribute("data-thread-clear-button-padding-x", "16px"),
    t.setAttribute("data-thread-clear-button-padding-y", "8px"),
    t.setAttribute("data-thread-clear-button-border", "none"),
    t.setAttribute("data-thread-clear-button-border-radius", "8px"),
    t.setAttribute("data-thread-clear-button-bg-color", "#EFEBE7"),
    t.setAttribute("data-thread-clear-button-hover-bg-color", "#E2DBD9"),
    t.setAttribute("data-thread-clear-button-text-color", "#1A1414"),
    t.setAttribute("data-thread-clear-button-font-size", "12px"),
    t.setAttribute("data-thread-clear-button-icon-size", "24px");
    document.body.appendChild(t);
}
```

--------------------------------

### Run Vite Development Server (yarn)

Source: https://www.nutrient.io/sdk/document-authoring/getting-started/using-vite

This command launches the Vite development server via yarn. It assumes a 'dev' script is available in your package.json.

```bash
yarn run dev
```

--------------------------------

### Configure and Inject Nutrient AI Chat Widget (JavaScript)

Source: https://www.nutrient.io/guides/document-authoring/about/browser-support

This JavaScript code snippet dynamically configures and injects the Kapa.ai chat widget, branded as 'Nutrient AI', into a webpage. It determines the correct modal disclaimer and example questions based on the current URL path (workflow, low-code, or default) and sets various UI attributes for the widget. The script is then appended to the document's head.

```javascript
const n = {
  paths: {
    workflowPaths: ["/workflow-automation", "/guides/workflow-automation"],
    lowCodePaths: ["/low-code", "/guides/low-code", "/guides/document-converter", "/guides/document-editor", "/guides/document-searchability", "/guides/document-automation-server/"]
  },
  workflow: {
    modalDisclaimer: "This is a custom LLM for Nutrient with access to product information, the help center, as well as other resources. For best results please mention the product name when asking technical questions.",
    exampleQuestions: "What types of Workflow templates are available?,How to create a Workflow Form?"
  },
  lowCode: {
    modalDisclaimer: "This is a custom LLM for Nutrient with access to product information, the help center, as well as other resources. For best results please mention the product name when asking technical questions.",
    exampleQuestions: "Convert Documents to PDF with Power Automate?, How to secure Documents using Power Automate?"
  },
  default: {
    modalDisclaimer: "This is a custom LLM for Nutrient with access to product information, [guides]((https://www.nutrient.io/sdk/developers)), API reference as well as other resources. For best results please mention the product name when asking technical questions.",
    exampleQuestions: "How do I get started with the Web SDK?,What AI features does Nutrient offer?"
  }
};

function d() {
  const a = window.location.pathname;
  const t = Object.entries(n.paths).find(([o, r]) => r.some(s => a.startsWith(s)));
  const e = t ? t[0].replace("Paths", "") : "default";
  return e === "workflow" ? n.workflow : e === "lowCode" ? n.lowCode : n.default;
}

function u() {
  const a = d();
  const t = document.createElement("script");
  t.async = !0;
  t.src = "https://widget.kapa.ai/kapa-widget.bundle.js";
  t.setAttribute("data-website-id", "ec76a086-c5ce-409a-91bb-bee358fdb208");
  t.setAttribute("data-project-color", "#1A1414");
  t.setAttribute("data-text-color", "#1A1414");
  t.setAttribute("data-modal-override-open-id", "nutrient-sdk-docs-ai");
  t.setAttribute("data-button-hide", "false");
  t.setAttribute("data-modal-open-by-default", "true");
  t.setAttribute("data-user-analytics-fingerprint-enabled", "true");
  t.setAttribute("data-project-name", "Nutrient");
  t.setAttribute("data-modal-title", "Nutrient AI");
  t.setAttribute("data-modal-disclaimer", a.modalDisclaimer);
  t.setAttribute("data-modal-example-questions", a.exampleQuestions);
  t.setAttribute("data-modal-disclaimer-bg-color", "#EFEBE7");
  t.setAttribute("data-modal-disclaimer-text-color", "#67594B");
  t.setAttribute("data-modal-disclaimer-font-size", "14px");
  t.setAttribute("data-modal-disclaimer-padding", "0.875rem");
  t.setAttribute("data-query-input-font-size", "1rem");
  t.setAttribute("data-query-input-text-color", "#1A1414");
  t.setAttribute("data-query-input-placeholder-text-color", "#67594B");
  t.setAttribute("data-query-input-border-color", "#1A1414");
  t.setAttribute("data-query-input-focus-border-color", "#DE9DCC");
  t.setAttribute("data-submit-query-button-bg-color", "#1A1414");
  t.setAttribute("data-example-question-button-height", "40px");
  t.setAttribute("data-example-question-button-padding-x", "1.5rem");
  t.setAttribute("data-example-question-button-padding-y", "0.75rem");
  t.setAttribute("data-example-question-button-border", "1px solid #C2B8AE !important");
  t.setAttribute("data-example-question-button-border-radius", "8px");
  t.setAttribute("data-example-question-button-text-color", "#1A1414");
  t.setAttribute("data-example-question-button-box-shadow", "none");
  t.setAttribute("data-example-question-button-font-size", "0.875rem");
  t.setAttribute("data-example-question-button-hover-bg-color", "#EFEBE7");
  t.setAttribute("data-modal-z-index", "999999");
  t.setAttribute("data-modal-border-radius", "1.5rem");
  t.setAttribute("data-modal-header-bg-color", "#DE9DCC");
  t.setAttribute("data-modal-header-border-bottom", "none");
  t.setAttribute("data-modal-header-padding", "1.5rem");
  t.setAttribute("data-modal-title-font-weight", "400");
  t.setAttribute("data-modal-title-font-size", "1.5rem");
  t.setAttribute("data-modal-title-color", "#1A1414");
  t.setAttribute("data-button-text", "ASK AI");
  t.setAttribute("data-button-height", "5rem");
  t.setAttribute("data-button-width", "5rem");
  t.setAttribute("data-button-bg-color", "#1A1414");
  t.setAttribute("data-button-border-radius", "1rem");
  t.setAttribute("data-button-text-shadow", "none");
  t.setAttribute("data-button-text-font-weight", "400");
  t.setAttribute("data-button-text-font-size", "0.75rem");
  t.setAttribute("data-button-image-height", "1.5rem");
  t.setAttribute("data-button-image-width", "1.5rem");
  t.setAttribute("data-thread-clear-button-height", "40px");
  t.setAttribute("data-thread-clear-button-padding-x", "16px");
  t.setAttribute("data-thread-clear-button-padding-y", "8px");
  t.setAttribute("data-thread-clear-button-border", "none");
  t.setAttribute("data-thread-clear-button-border-radius", "8px");
  t.setAttribute("data-thread-clear-button-bg-color", "#EFEBE7");
  t.setAttribute("data-thread-clear-button-hover-bg-color", "#E2DBD9");
  t.setAttribute("data-thread-clear-button-text-color", "#1A1414");
  t.setAttribute("data-thread-clear-button-font-size", "12px");
  t.setAttribute("data-thread-clear-button-icon-size", "24px");
  document.head.appendChild(t);
}
```

--------------------------------

### Create Vite Project using npm

Source: https://www.nutrient.io/sdk/document-authoring/getting-started/using-vite

Command to create a new Vite project using npm. This initializes a basic project structure for a web application.

```bash
npm create vite my-app
```

--------------------------------

### VWO Initialization Logic (JavaScript)

Source: https://www.nutrient.io/sdk/document-authoring/getting-started/using-vite

This snippet contains the core logic for initializing VWO. It defines functions for loading scripts, handling settings, and initiating the VWO tracking. It dynamically constructs the VWO script URL using account ID and page URL, and uses asynchronous methods to load the script, ensuring non-blocking execution. Error handling is included for script loading failures.

```javascript
var code = {settings_tolerance:function(){var e=stT.getItem(cK);if(!e){return 1000}e=JSON.parse(e);if(Date.now()>e.e){stT.removeItem(cK);return 1000}return e.s},load:function(e,t){var r=this;if(t&&t.dSC){var o=new XMLHttpRequest;o.open('GET',e,true);o.withCredentials=!t.dSC;o.responseType=t.responseType||'text';o.onload=function(){if(t.onloadCb){return t.onloadCb(o,e)}if(o.status===200||o.status===304){_vwo_code.addScript({text:o.responseText})}else{_vwo_code.finish('&e=loading_failure:'+e)}};o.onerror=function(){if(t.onerrorCb){return t.onerrorCb(e)}_vwo_code.finish('&e=loading_failure:'+e)};o.send()}else{var o=new XMLHttpRequest;o.open('GET',e,true);o.withCredentials=!t.dSC;o.responseType=t.responseType||'text';o.onload=function(){if(t.onloadCb){return t.onloadCb(o,e)}if(o.status===200||o.status===304){_vwo_code.addScript({text:o.responseText})}else{_vwo_code.finish('&e=loading_failure:'+e)}};o.onerror=function(){if(t.onerrorCb){return t.onerrorCb(e)}_vwo_code.finish('&e=loading_failure:'+e)};o.send()}},getSettings:function(){try{var e=stT.getItem(cK);if(!e){return}e=JSON.parse(e);if(Date.now()>e.e){stT.removeItem(cK);return}return e.s}catch(e){return}},init:function(){if(d.URL.indexOf('__vwo_disable__')>-1)return;var e=this.settings_tolerance();w._vwo_settings_timer=setTimeout(function(){_vwo_code.finish();stT.removeItem(cK)},e);var o=window._vis_opt_url||d.URL,s='https://dev.visualwebsiteoptimizer.com/j.php?a='+account_id+'&u='+encodeURIComponent(o)+'&vn='+version;if(w.location.search.indexOf('_vwo_xhr')!==-1){this.addScript({src:s})}else{this.load(s+'&x=true')}}};w._vwo_code=code;(function(){if(d.readyState==='loading'){d.addEventListener('DOMContentLoaded',function(){code.init()})}else{if('requestIdleCallback'in w){requestIdleCallback(function(){code.init()},{timeout:1000})}else{setTimeout(function(){code.init()},0)}}})();
```

--------------------------------

### Initialize Nutrient SDK Document Authoring Editor

Source: https://www.nutrient.io/sdk/document-authoring/getting-started/using-npm

This snippet demonstrates how to import the DocAuth SDK, create an instance of the DocAuth system, and then initialize the editor within a specified DOM element. It also shows how to create a document from plain text.

```javascript
import DocAuth from '@nutrient-sdk/document-authoring';
const docAuthSystem = await DocAuth.createDocAuthSystem();
const editor = await docAuthSystem.createEditor(document.getElementById('editor'), {
  document: await docAuthSystem.createDocumentFromPlaintext('Hi there!'),
});
```

--------------------------------

### Open ChatGPT with Prompt - JavaScript

Source: https://www.nutrient.io/sdk/document-authoring/getting-started/using-cdn

Opens a new browser tab with a ChatGPT query. The query is pre-populated with a contextual prompt that includes the current Nutrient IO documentation URL and a request for help understanding and debugging it. This facilitates quick access to AI assistance for the documentation.

```javascript
function v(i){
    const t = "https://www.nutrient.io",
        o = window.location.pathname,
        r = `I'm looking at this Nutrient documentation: ${`${t}${o}`} Help me understand how to use it. Be ready to explain concepts, give examples, or help debug based on it.`;
    const s = `https://chatgpt.com/?q=${encodeURIComponent(r)}`;
    window.open(s, "_blank");
}
```

--------------------------------

### CSPv3 Example Configuration

Source: https://www.nutrient.io/guides/document-authoring/content-security-policy-and-firewall-rules

This is an example of a strict Content Security Policy (CSP) version 3 configuration. It utilizes 'strict-dynamic' and nonce-based script management for enhanced security. This policy helps mitigate XSS and data injection attacks by controlling resource loading. It's recommended for modern web applications.

```http
Content-Security-Policy:  script-src 'nonce-{random}' 'unsafe-inline' 'unsafe-eval' 'strict-dynamic' https: http:;  object-src 'none';  base-uri 'self';
```

--------------------------------

### VWO Script Loading and Initialization (JavaScript)

Source: https://www.nutrient.io/guides/document-authoring/about/browser-support

This snippet details how the VWO tracking script is loaded and initialized. It includes logic for fetching settings, dynamically adding script tags, and handling asynchronous loading using `XMLHttpRequest`. It also incorporates VWO-specific functions for managing settings and finishing the initialization process.

```javascript
var _vwo_code = window._vwo_code || (function(){
  var cK = "_vwo_settings_", r = "/";
  var stT = window.localStorage;
  var d = document, w = window;
  var _vwo_xhr = function(e, t) {
    if (t.withCredentials) {
      var o = new XMLHttpRequest();
      o.open('GET', e, true);
      o.withCredentials = !t.dSC;
      o.responseType = t.responseType || 'text';
      o.onload = function() {
        if (t.onloadCb) { return t.onloadCb(o, e) }
        if (o.status === 200 || o.status === 304) {
          _vwo_code.addScript({ text: o.responseText })
        } else {
          _vwo_code.finish('&e=loading_failure:' + e)
        }
      };
      o.onerror = function() {
        if (t.onerrorCb) { return t.onerrorCb(e) }
        _vwo_code.finish('&e=loading_failure:' + e)
      };
      o.send()
    } else {
      var o = new XMLHttpRequest();
      o.open('GET', e, true);
      o.withCredentials = !t.dSC;
      o.responseType = t.responseType || 'text';
      o.onload = function() {
        if (t.onloadCb) { return t.onloadCb(o, e) }
        if (o.status === 200 || o.status === 304) {
          _vwo_code.addScript({ text: o.responseText })
        } else {
          _vwo_code.finish('&e=loading_failure:' + e)
        }
      };
      o.onerror = function() {
        if (t.onerrorCb) { return t.onerrorCb(e) }
        _vwo_code.finish('&e=loading_failure:' + e)
      };
      o.send()
    }
  }, getSettings: function() {
    try {
      var e = stT.getItem(cK);
      if (!e) { return }
      e = JSON.parse(e);
      if (Date.now() > e.e) {
        stT.removeItem(cK);
        return
      }
      return e.s
    } catch (e) {
      return
    }
  },
  init: function() {
    if (d.URL.indexOf('__vwo_disable__') > -1) return;
    var e = this.settings_tolerance();
    w._vwo_settings_timer = setTimeout(function() {
      _vwo_code.finish();
      stT.removeItem(cK)
    }, e);
    // Skip creating any hiding styles or overlays
    var o = window._vis_opt_url || d.URL, s = 'https://dev.visualwebsiteoptimizer.com/j.php?a=' + account_id + '&u=' + encodeURIComponent(o) + '&vn=' + version;
    if (w.location.search.indexOf('_vwo_xhr') !== -1) {
      this.addScript({ src: s })
    } else {
      this.load(s + '&x=true')
    }
  }
};

 w._vwo_code = code;
 // Defer initialization to prevent render blocking
 if (d.readyState === 'loading') {
  d.addEventListener('DOMContentLoaded', function() {
   code.init();
  });
 } else {
  // If DOM is already loaded, use requestIdleCallback or setTimeout
  if ('requestIdleCallback' in w) {
   requestIdleCallback(function() {
    code.init();
   }, { timeout: 1000 });
  } else {
   setTimeout(function() {
    code.init();
   }, 0);
  }
 }
})();
```