👍
Make sure you have a Meya account before starting this guide
You'll need access to Meya to follow along with this guide. You can now sign up for a free 2-week trial. All you need is a work email.
🚀 Click here to start a free trial

What the email use-case looks like in Front (left) and Gmail (right).

What the Orb use-case looks like in Front (left) and Orb (right).

📘
Related resources for this guide

Template source code on GitHub

Interactive demo on Codepen

Part 1: Demo video

Part2: Email use-case video

Part 3: Orb use-case video

Front's communication hub combines emails, apps, and teammates into a single view so you can make every moment with customers more meaningful.

With the Front template app, you can:

connect Front to your Meya app and seamlessly pass control of the conversation between the app and the agent
extract multiple intents from an email
handle email and live chat with separate flows

While the template has flows and components to get you started, the integrations will require some configuration in their respective platforms. This guide will walk you through that process.

1. Create the app

The first step is the create a new app based on the Front template app.

Navigate to your Meya console and click Create app. Give it a descriptive name. Copy this URL and paste it in the Git repo URL field:

https://github.com/meya-customers/front-demo.git

Creating an app from a Github repo

Once the app is ready, the screen will update, indicating the app is available to work with.

2. Configure integrations

While the template has flows and components to get you started, the integrations will require some configuration in their respective platforms. This guide will walk you through that process.

Front

To get the Front integration working, you'll need to complete all of the steps in this guide, except for the Create integration step, which has already been done for you.

Dialogflow

Dialogflow allows your app to use natural language understanding to determine the user's intent, extract key information from their input, and issue the appropriate response.

In order to use this integration, you'll need to create a Dialogflow agent, add some intents that are relevant to your use-case, and add the service account credentials to your app's vault. The complete instructions can be found in this guide

In order to get the same experience in the demo video, you'll need to zip up the integration/google/dialogflow_agent folder and import it into your Dialogflow agent.

You can skip the step called Add the Dialogflow integration to your Meya app since this has already been done for you.

Orb

The Orb doesn't require any setup, although you may want customize certain settings like the colour scheme and the launch icon. The guides below describe how to do this:

Orb
Launcher

3. Upload your changes

To make sure everything is uploaded and ready to use, run these commands in your terminal:

meya format
meya vault upload --file vault.secret.yaml
meya push

3. Test it out!

You can try out the orb flows by opening public/index.html. If you've added intents in Dialogflow, you'll be able to enter text. To create a Front conversation, you can use the human keyword.

👍
Great! You've finished setting up the Front app template. Now it's time to start customizing it for your needs!