Getting Started - Dittofeed

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.

Email: [email protected]
Discord: Discord Server

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>

On this page

Introduction
1. Obtain an Parent Admin API Key
2. Create a Child Workspace
3. Create a Session Token
4. Embed Dittofeed Components
Journey Editor
Journey Table
Broadcast Editor
Broadcasts Table
Template Editor
SMS Editor
Email Editor
Templates Table
Segment Editor
Segments Table
Deliveries Table

Introduction

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.

Email: [email protected]
Discord: Discord Server

2. Create a Child Workspace

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>

On this page

Introduction
1. Obtain an Parent Admin API Key
2. Create a Child Workspace
3. Create a Session Token
4. Embed Dittofeed Components
Journey Editor
Journey Table
Broadcast Editor
Broadcasts Table
Template Editor
SMS Editor
Email Editor
Templates Table
Segment Editor
Segments Table
Deliveries Table

​Introduction

​1. Obtain an Parent Admin API Key

​2. Create a Child Workspace

​3. Create a Session Token

​4. Embed Dittofeed Components

​Journey Editor

​Journey Table

​Broadcast Editor

​Broadcasts Table

​Template Editor

​SMS Editor

​Email Editor

​Templates Table

​Segment Editor

​Segments Table

​Deliveries Table

​Introduction

​1. Obtain an Parent Admin API Key

​2. Create a Child Workspace

​3. Create a Session Token

​4. Embed Dittofeed Components

​Journey Editor

​Journey Table

​Broadcast Editor

​Broadcasts Table

​Template Editor

​SMS Editor

​Email Editor

​Templates Table

​Segment Editor

​Segments Table

​Deliveries Table

Introduction

1. Obtain an Parent Admin API Key

2. Create a Child Workspace

3. Create a Session Token

4. Embed Dittofeed Components

Journey Editor

Journey Table

Broadcast Editor

Broadcasts Table

Template Editor

SMS Editor

Email Editor

Templates Table

Segment Editor

Segments Table

Deliveries Table

Introduction

1. Obtain an Parent Admin API Key

2. Create a Child Workspace

3. Create a Session Token

4. Embed Dittofeed Components

Journey Editor

Journey Table

Broadcast Editor

Broadcasts Table

Template Editor

SMS Editor

Email Editor

Templates Table

Segment Editor

Segments Table

Deliveries Table