​
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.

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.

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.

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

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.

<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.

<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.

<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.

<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.

<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.

<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.

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