Introduction

Dittofeed provides a set of embedded components that you can use to embed Dittofeed in your application. This enables you to extend your application with messaging automation features including a low-code journey builder, segmentation, email templates, subscription management, and more. In this guide, we’ll walk you through the steps to embed Dittofeed in your application.

1. Obtain an Parent Admin API Key

Reach out to the Dittofeed team to obtain a Parent Admin API Key for your parent workspace. This key will be used to authenticate your requests to the Dittofeed API.

2. Create a Child Workspace

Create a child workspace. You can optionally associate this with an externalId if you have a business entity or customer in your own system that you want to associate with the workspace. This will make accessing the workspace more convenient. Use the PUT /api-l/admin/workspaces/child endpoint to create a child workspace.
curl -X PUT \
  -H "Authorization: Bearer <parent-admin-api-key>" \
  -H "Content-Type: application/json" \
  -d '{"name": "My Customer Business", "externalId": "1234567890", "workspaceId": "<parent-workspace-id>"}' \
  https://app.dittofeed.com/api-l/admin/workspaces/child
This will respond with the child workspace id and write key.
{
  "id": "6eed2156-606a-4666-925e-7f89adddd743",
  "name": "My Customer Business",
  "externalId": "1234567890",
  "writeKey": "Basic OTQ0MjNkNzctMzA0Ni00MDBhLTgxMDYtMTM2ZTIzZmQyMzE2OjQ3YjRlYzExOTM3NDE3MjU=",
  "type": "Child",
  "status": "Active"
}
Make sure to store the write key, which will be used to submit events to the child workspace.

3. Create a Session Token

Use the POST /api-l/sessions endpoint on your backend to create a session token.
curl -X POST \
  -H "Authorization: Bearer <write-key>" \
  -H "Content-Type: application/json" \
  -d '{"workspaceId": "<child-workspace-id>"}' \
  https://app.dittofeed.com/api-l/sessions
This will respond with a session token.
{
  "token": "1234567890"
}
This token can then be passed to your frontend, and used to embed Dittofeed components until it expires. By default, the session token expires in 1 hour.

4. Embed Dittofeed Components

Take your session token and pass it to the Dittofeed components which can be loaded via an iframe.

Journey Editor

The journey editor allows you to create and edit journeys.
Embedded Journey Editor

Create a new journey.

<iframe
  src="https://app.dittofeed.com/dashboard-l/embedded/journeys/v2?token=${SESSION_TOKEN}&workspaceId=${CHILD_WORKSPACE_ID}&id=${JOURNEY_ID}"
  width="100%"
  height="100%"
></iframe>

Journey Table

The journey table displays all of the journeys for the child workspace. It provides a way to create new journeys, and view existing ones.
Embedded Journey Table

View all journeys for the child workspace.

<iframe
  src="https://app.dittofeed.com/dashboard-l/embedded/journeys?token=${SESSION_TOKEN}&workspaceId=${CHILD_WORKSPACE_ID}"
  width="100%"
  height="100%"
></iframe>

Broadcast Editor

The broadcast editor allows you to create and edit broadcasts.
Embedded Broadcast Recipients

Select who you'd like to send the broadcast to.

Embedded Broadcast Configuration

Send a broadcast immediately or schedule it for a later date.

<iframe
  src="https://app.dittofeed.com/dashboard-l/embedded/broadcasts/v2?token=${SESSION_TOKEN}&workspaceId=${CHILD_WORKSPACE_ID}&id=${BROADCAST_ID}"
  width="100%"
  height="100%"
></iframe>

Broadcasts Table

The broadcasts table displays all of the broadcasts for the child workspace. It provides a way to create new broadcasts, view existing ones, and archive them.
Embedded Broadcasts Table
<iframe
  src="https://app.dittofeed.com/dashboard-l/embedded/broadcasts?token=${SESSION_TOKEN}&workspaceId=${CHILD_WORKSPACE_ID}"
  width="100%"
  height="100%"
></iframe>

Template Editor

The template editor allows you to create and edit message templates.

SMS Editor

The SMS editor allows you to create and edit SMS templates.
Embedded SMS Editor
<iframe
  src="https://app.dittofeed.com/dashboard-l/embedded/templates/sms?token=${SESSION_TOKEN}&workspaceId=${CHILD_WORKSPACE_ID}&id=9fb712c3-8b65-4908-a9f7-68f1b8b99075"
  width="100%"
  height="100%"
></iframe>

Email Editor

The email editor allows you to create and edit email templates.
Embedded Email Editor
<iframe
  src="https://app.dittofeed.com/dashboard-l/embedded/templates/email?token=${SESSION_TOKEN}&workspaceId=${CHILD_WORKSPACE_ID}&id=c3d28959-dda0-4b75-ba27-0d73ba939ef1"
  width="100%"
  height="100%"
></iframe>

Templates Table

The templates table displays all of the message templates for the child workspace.
Embedded Templates Table
<iframe
  src="https://app.dittofeed.com/dashboard-l/embedded/templates?token=${SESSION_TOKEN}&workspaceId=${CHILD_WORKSPACE_ID}"
  width="100%"
  height="100%"
></iframe>

Segment Editor

The segment editor allows you to create and edit segments.
Embedded Segment Editor
<iframe
  src="https://app.dittofeed.com/dashboard-l/embedded/segments/v1?token=${SESSION_TOKEN}&workspaceId=${CHILD_WORKSPACE_ID}&id=${SEGMENT_ID}"
  width="100%"
  height="100%"
></iframe>

Segments Table

The segments table displays all of the segments for the child workspace. It provides a way to create new segments, view existing ones, and archive them.
Embedded Segments Table
<iframe
  src="https://app.dittofeed.com/dashboard-l/embedded/segments?token=${SESSION_TOKEN}&workspaceId=${CHILD_WORKSPACE_ID}"
  width="100%"
  height="100%"
></iframe>

Deliveries Table

The deliveries table displays all of the message deliveries for the child workspace e.g. for sent emails, and SMS.
Embedded Deliveries Table
<iframe
  src="https://app.dittofeed.com/dashboard-l/embedded/deliveries/v2?token=${SESSION_TOKEN}&workspaceId=${CHILD_WORKSPACE_ID}"
  width="100%"
  height="100%"
></iframe>