Embedding Interaction Builder

Overview¶

This tutorial describes how Giosg partners are able to embed Interaction Designer inside their own application.¶

Prerequisites¶

Before you can embed Interaction Designer, you should of course have your giosg account and a correct configuration. Contact giosg support for more information.

Iframing Interaction Designer¶

giosg allows Interaction Designer to be iframed inside partner's application. Iframing Interaction Designer and applying the correct features slightly modifies how the application looks and behaves. For example partners have the possibility to decide how to handle save and cancel button clicks in the Interaction Designer UI.

When iframed, Interaction Designer will communicate with parent page (Partner application) by using the Window.postMessage API. This API is used to send events indication which actions the user is making. The partner can then listen for these events and use Interaction designer HTTP API to for example publish interactions.

Getting started¶

To get started with embedding Interaction Designer you should contact Giosg support for more information and help with your process.

You may also take a look at this small example application which demonstrates how the Interaction Designer embedding works in practice.

postMessage events sent by embedded Interaction Designer¶

Interaction Designer will emit Window.postMessage events to parent page in certain cases. You can listen to these events can be listened with following snippet:

window.addEventListener("message", (event) => {
  if (
    ![
      "https://interactionbuilder.giosg.com",
      "https://editor.staging.giosg.com",
    ].includes(event.origin)
  )
    return;

  const eventData = JSON.parse(event.data);
  console.log("Received", eventData);
});

List of events¶

Interaction saved

This event is send when the user clicks Save or Publish button in the ID user interface.

{
  "type": "interactiondesigner:save",
  "interaction_id": "1b5298ef-3e7a-433c-8b74-866b0505225b",
  "organization_id": "b76acd00-cf09-11e0-8104-00163ee6f85d",
  "user_id": "89cf5b22-fe48-11ea-a299-0242ac110002"
}

Attribute	Type	Description
`type`	string	Always `interactiondesigner:save`
`interaction_id`	string	The ID of the interaction that was saved
`organization_id`	string	The ID of the organization owning the interaction
`user_id`	string	The ID of the user who did click save

Cancel

Send whenever user clicks Cancel button in the ID user interface which would normally take user back to collection view from the interaction editing.

{
  "type": "interactiondesigner:cancel",
  "interaction_id": "1b5298ef-3e7a-433c-8b74-866b0505225b",
  "organization_id": "b76acd00-cf09-11e0-8104-00163ee6f85d",
  "user_id": "89cf5b22-fe48-11ea-a299-0242ac110002"
}

Attribute	Type	Description
`type`	string	Always `interactiondesigner:cancel`
`interaction_id`	string	The ID of the interaction that was saved
`organization_id`	string	The ID of the organization owning the interaction
`user_id`	string	The ID of the user who did click save