Information Classification: External Restricted.
See https://www.chili-publish.com/security
Getting started with your JavaScript integration
Concept
An editor that is embedded in your HTML pages can be interacted with using our JavaScript API. See Embedding an Editor in your own portals
There are many reasons a team would want to do this. Some examples are:
Updating variables on document load
Connecting to a custom widget
Building a partial or complete custom interface
Creating a “Save” button or an auto-save feature
Connection To CHILI publisher
You cannot communicate with the CHILI publisher directly due to the editor running in an iframe and browser security blocking JavaScript communication across iframes.
Therefore, if you want to utilize our JavaScript API across iframes you need to utilize our plugin: publisher-connector
You can install publisherInterface via npm
npm i @chili-publish/publisher-interface
or through yarn
yarn add @chili-publish/publisher-interface
Or you can use the version from unpkg.com in your <script/> tags:
https://unpkg.com/@chili-publish/publisher-connector@latest/dist/publisherInterface.min.js
Which one should I use?
If you utilize the NPM package, you will get all the benefits of TypeScript declaration files. However, you will need to use a module bundler like Webpack, Parcel, Rollup, etc. to package your JavaScript files for the web.
If you want to use this library in your integration without requiring a build phase, or you just want something simple, you can utilize the unpkg.com URL
Once you have decided, it is time to begin your integration. There are two steps:
Create an instance of the PublisherInterface
Listen to the event for the CHILI document to be fully rendered
Create an instance of the PublisherInterface
To create an instance of the publisherInterface, you will need to use the .build()
method and pass in the iframe element.
Below is the code of a quite simple website where the iframe URL for CHILI publisher is already set.
<body>