Implement Sidekick Messaging API

Problem/Motivation

We plan that the sidekick should know more context from the site and at some point even be able to change content directly in the CMS. For this we use iFrame messaging.

Proposed resolution

You can send a message to the iframe with:

document.querySelector('iframe').contentWindow.postMessage({...}, '*');

Send current page content to the sidekick
When the user switches to a page, please pass the content to the iframe as follows.

{
  version: '1.0',
  eventName: 'page-changed', /* or page-updated */
  data: {
      'url': 'https://example.com/my-page', /* url where the site will be published */
      'title': 'Lala', /* page title */
      'content': '<h1>My content</h1><p>Lorem Ipsum...', /* content of the page in HTML */
      'structuredContent': [ /* cms specific style */
          {type: 'Headline', title: 'My content'},
          {type: 'Text', title: 'Lorem Ipsum'},
          ...
      ],
      'focusKeyword': 'Webdevelopment Agency Vienna',
      'targetAudience': 'Tech-savvy people',
      'pageBriefing': 'On this page we want to explain the problem X and offer our solution Y.',  /* WIP */
  }
}

For URL please the URL of the page once it will be published. It may be that the site is a work in progress and this URL is currently not available, that's ok. In structuredContent you can transfer the page content as it is structured in your CMS.

If the content of the page changes, you can use page-updated as the event name, then we will update the content in the background without notifying the user again.

Remaining tasks

- Implement
- Test