@wochit/embedded NPM module

• Documentation
• Using NPM module
• Using script from CDN

Intro

https://user-images.githubusercontent.com/3756473/167427983-89c60590-a1f5-4c6c-9e95-bb54facdfddd.mp4

Using NPM module

Install

npm i @wochit/embedded

yarn add @wochit/embedded

pnpm add @wochit/embedded

Using default import

import wt from '@wochit/embedded';

wt.config({ clientId, userToken });

document.querySelector('.video-editor-btn').addEventListener('click', () => {
  wt.openVideoEditor({});
});

Using named import

import { config, openVideoEditor } from '@wochit/embedded';

config({ clientId, userToken });

document.querySelector('.video-editor-btn').addEventListener('click', () => {
  openVideoEditor({});
});

Using script from CDN

• async IIFE (non-blocking)

  <script type="application/javascript">
    (function (window, document, tag, url, name, a, m) {
      window['__wochit_object_name__'] = name;
      window[name] =
        window[name] ||
        function () {
          (window[name].q = window[name].q || []).push(arguments);
        };
      (a = document.createElement(tag)), (m = document.getElementsByTagName(tag)[0]);
      a.async = 1;
      a.src = url;
      m.parentNode.insertBefore(a, m);
    })(window, document, 'script', 'https://embedded.wochit.com/latest.min.js', 'wt');
  </script>

• sync (blocking)

  <script
    src="https://embedded.wochit.com/latest.min.js"
    type="application/javascript"
  ></script>

Then somewhere in your app:

window.wt('config', { clientId, userToken });

document.querySelector('.video-editor-btn').addEventListener('click', () => {
  window.wt('openVideoEditor', {});
});

Subresource Integrity (SRI)

• To find integrity string for given version please check-out the Releases page.
• Use versioned CDN link, for example: embedded.wochit.com/#.#.#.min.js
• add crossorigin and integrity attributes depending on usage like so:

...
a.setAttribute('crossorigin', 'anonymous');
a.setAttribute('integrity', 'PASTE_INTEGRITY_STRING');
// paste the above before this line:
a.src = url;
...

<script
  src="https://embedded.wochit.com/#.#.#.min.js"
  type="application/javascript"
  crossorigin="anonymous"
  integrity="PASTE_INTEGRITY_STRING"
></script>