Skip to content

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:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
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.

1
2
3
4
5
6
{
  "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.

1
2
3
4
5
6
{
  "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