Cling Docs

Appearance

Getting Started ​

The widget can be installed/imported as either ESM or UMD.

Import as ES module ​

Install package ​

sh
$ npm add @cling-se/widget
sh
$ pnpm add @cling-se/widget
sh
$ yarn add @cling-se/widget

Import module ​

js
import Cling from '@cling-se/widget'

Import as UMD (via CDN) ​

html
<!-- Resolve to latest version -->
<script src="https://unpkg.com/@cling-se/widget/dist/index.umd.js" />

<!-- Specify version -->
<script src="https://unpkg.com/@cling-se/widget@0.11.0/dist/index.umd.js" />

Initialize widget ​

The widget also needs to be initialized in the JS-runtime before further use:

js
Cling.init()

Important

Currently the initialized widget is only available on the window object as window.Cling. This will be fixed in a future release.

Therefore all subsequent calls to the widget needs to be through the window.Cling object, not the Cling import.

Environment configuration ​

The widget can be initialized in either development or production environment. Solutions on how this is specified varies based on your import choice, this is due to limitations in these Javascript modularity methods.

ESM imports has the choice of specifying environment directly in the init method.

js
Cling.init({
  environment: 'production'
})

UMD imports on the other hand needs to be specified on window.clingOptions before the script is loaded.

vue
// Either add this script tag before the one importing the widget
<script>
  window.clingOptions = { environment: 'development' }
</script>

// Or just set the variable before imported widget script is run
window.clingOptions = { environment: 'development' }
(function(){var w=window... /* widget script content */ })()

Note: Both options work for ESM imports but only the latter works for UMD imports