Embed configuration widget to administrator panel

In the administrative area of your CMS there is a section with the CMS configuration. Add a page with N1ED options there. The configuration itself lives in the cloud and is edited in the Dashboard; this page is where an administrator links the CMS to an API key, opens the Dashboard for it and changes the key later.

The widget on a settings page of your admin panel, linked to an API key

There is a ready widget for that, the one our own CMS modules embed. On the page, load the script and attach the widget to a placeholder. PHP example:

<?php
    $apiKey = getN1EDApiKeyFromDB(); // write your own function
?>

<div id="cms-conf-placeholder"></div>
<script src="https://n1ed.com/js/n1ed-cms-conf-3.js"></script>
<script>
    window.attachN1EDCmsConf({
        el: document.getElementById("cms-conf-placeholder"),
        urlSetApiKey: "/setApiKey.php",   // the script of the previous step
        apiKey: "<?php echo $apiKey ?>",
        editorName: "tinymce",            // or "ckeditor", if it is your base editor
        integration: "your-cms-name",     // your CMS name in lowercase; type it once and never change it
        isCheckBoxN1EDEcoEnabledVisible: false,
        onApiKeyChange: function (apiKey) {}
    });
</script>

The options:

• el: the element the widget renders into.
• urlSetApiKey: the URL of the script of the previous step; the new key is posted there.
• urlSetApiKey__CSRF: optional. When that URL is protected by a CSRF token, either an object {headers: {...}, params: {...}} the widget adds to the request, or a function (onSuccess, onError) => ... that fetches the token and calls onSuccess with such an object.
• apiKey: the key from your database.
• editorName: "tinymce" or "ckeditor".
• integration: the name of your CMS in lowercase. It becomes part of the registration link the widget offers, so choose it once and keep it.
• isCheckBoxN1EDEcoEnabledVisible, checkBoxN1EDEcoEnabledTitle, checkBoxN1EDEcoEnabledValue, onN1EDEcoEnabledChange: an on/off switch for N1ED in your CMS, shown when the first one is true. The widget shows the title and the value you pass, and calls onN1EDEcoEnabledChange(isEnabled, onFinished) when the switch is toggled: save the value, then call onFinished(null), or onFinished("error text").
• onApiKeyChange(apiKey): called after a new key was saved, for a page that shows the key somewhere else too.

What the widget shows depends on the key. Until the CMS has an API key of its own, that is, on the shared demo key, it says that N1ED is not linked to a key of yours and offers to set one or to register an account:

The widget before an API key is set

Set API key asks for the 24-character key, checks it with the N1ED cloud (an unknown key is refused right there) and posts it to urlSetApiKey. Linked to a key, the widget shows the first 8 characters of the key, a Dashboard button, which opens the Dashboard in a new tab, and Change key. No password is involved: the Dashboard has its own login, so your CMS never stores it.

If you prefer that authors do not open the Dashboard from the editor, switch its Configure button off for the key (ui.showConfButton, UI and widgets): the settings page of your admin panel is then the only way to it.

Check it

Create one more API key in the Dashboard. Open your N1ED settings page, press Set API key (or Change key) and paste the new key: the widget checks it with the cloud and posts it to your script. Reload the page: the widget shows the first characters of the new key, and the editor on your pages loads with the new key and its configuration.