👍

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

📘

Related resources for this guide

• Template source code on GitHub
• Interactive demo on Codepen
• Demo video on Loom

The fitness template app demonstrates how a Meya app can streamline the onboarding process for new users of a fitness app, deflect support questions from agents, and provide different support experiences depending on the type of user (e.g. free vs paid).

📘

Example use-case

Strava is a popular fitness app for runners and cyclists. It connects with almost any fitness monitoring device and tracks your route as well as health and performance metrics. It's also a social network: you can compete on leaderboards and challenges, share your activities with your followers, and comment on other peoples' activities, too.

Let's see how the fitness template could be used by a fitness company like Strava.

With the fitness template, you can connect Zendesk to your Meya app and seamlessly pass control of the conversation between the app and the agent in both ticketing and live chat mode, and search and display articles from Zendesk Help Center.

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 Strava 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/fitness-demo.git

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

2. Add integrations

The template comes with several integrations already added: Zendesk Support, Zendesk Chat, Zendesk Help Center, and the Orb.

Zendesk Support

To get the Zendesk Support integration working, you'll need to complete all of the steps in this guide, starting with Retrieve the integration webhook: Zendesk Support

Zendesk Chat

For Zendesk Chat, you'll just need to complete the first two steps from this guide (Retrieve the account key and Update vault secrets): Zendesk Chat

Zendesk Help Center

Since the Zendesk Help Center integration requires the same credentials as Zendesk Support, it's already good to go!

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

4. Test it out

In the app's public folder, you'll find two files: strava_free_user.html and strava_paid_user.html. Open the files in your browser to test them out.

• Click the Connect Devices button and select a brand. Note that only Zwift and Wahoo have been implemented for this demo.
• Click the Privacy Settings button to go through the privacy wizard.
• In the Connect Devices flow, try escalating to an agent. If you're viewing strava_free_user.html, a ticket will be created in Zendesk Support. If you're using strava_paid_user.html, you'll enter a live chat queue in Zendesk Chat.

If you want other people on your team to have access to these test pages, create a Codepen and paste the HTML into the HTML box. Then you can share the Codepen URL with your colleagues.

👍

Awesome! You've successfully set up the fitness template app!