Building a Twitch Extension and Companion Web App

What is mymailbag?

Mymailbag is a Twitch.tv extension and accompanying web application allowing streamers to build their mailing list right from their stream.

Email lists are an important marketing tool. A great way to connect and inform an audience. Typically, email lists are used to provide updates, sell products, and inform.

Currently, Twitch does not provide a way to communicate outside of the platform or provide access to real contact details of audience members.

My extension is a simple form that sits inside a 'channel panel' (underneath the stream video feed). Audience members can enter their email address (no page refresh to ensure the stream remains uninterrupted). The email is then posted to an API and into a "mailbag" — a private table where the streamer can access all of their channel's email submissions.

How it Works

Streamer installs the extension and assigns it to a panel on their channel. Streamer creates an account using their Twitch login on mymailbag.app Audience enters their email into textbox inside of extension panel underneath the stream video feed. Email address is sent and appears in a table within a web application dashboard for the streamer with ability to export the list of emails for import with their favorite email marketing platform (i.e. Mailchimp, Convertkit, etc...) Project Goals Help streamers build, retain, and communicate with their audience outside of the Twitch.tv platform Own their audience data (contact info) Make recurring revenue Twitch Developer Platform Twitch provides a comprehensive and supportive platform for developers to build apps around their service —> https://dev.twitch.tv/ . Things are mostly well documented with an emphasis on developers being able to build in a variety of ways, not just relying on one method to get things done. Their API is well thought out, forgiving, and provides readable errors. Included in the docs are example repos to get you started in your favorite language/framework or your choice.

Aside from standard documentation there are 3 critical resources that helped make my development easier:

Twitch Developer Forums - A user named Barry Carlyon answers nearly every question developers have and is a huge resource. Don't be afraid to chat him up, Barry has built all sorts of things and has helped me numerous times. Twitch Developer Discord - This Discord guild is very active and is a great place to communicate with other developers. You will also find great help here. All levels of developers welcome. Twitch Developer Rig - A well integrated testing/development environment for your extensions. Tons of documentation and example code. Similar environment to when your extension is running in the wild on Twitch. Project Tech Stack Extension:

Vue + html + Vanilla JS + CSS

Web Application:

Django + Django Rest API + tailwindUI + Alpine JS + Vanilla JS + PostgreSQL

Approval Process

After an Extension version is reviewed by Twitch, it is placed into one of three states:

Pending Action means revisions are required. You are contacted at the email address you provided and told any the reason the Extension was not approved. You can then take the extension back to a test state, iterate on the issues, and re-submit for review. You do not need to create a new version. Rejected means Twitch views the Extension as inappropriate and will not accept it. The Extension’s Client ID, which is a unique identifier, is permanently revoked. Rejected is a terminal state. Approved means you can release your Extension at any time. You can go back to a test state if desired, but you will have to go through another full review cycle. Here is the process for getting your extension approved:

Local Test

Twitch CDN & Hosted Test Internal Review by Twitch Developers Receive review status (usually within 1-3 business days) If approved, your extension will be available immediately in the extension library

Otherwise, you will need to make appropriate changes based on the comments of the most recent review process and re-submit Updating After Release To update an Extension after it has been released, create a new version and submit it for review. This process does not affect the version of your Extension that is live. To create a new version, go to your Extensions developer console and do one of the following:

Click on the Extension to be updated, to open a page listing all versions of that Extension. Click Create New Version.The system copies all information from the prior version to the new one. Clone any previous version, to use as the basis for your new version. section source: https://dev.twitch.tv/docs/extensions/life-cycle#updating-after-release

Key Performance indicators (KPI)

I currently use a mixture of Google Analytics and the Twitch Developer Console Analytics (seen below).

Being able to track installs, activations, extension details page visits (the install instructions) is invaluable. For example, in the image below, there are 22 installs and 38 extension details page views. This could suggest that users are viewing the install directions more than once — meaning I should re-visit the design of my onboarding. The goal would be for users to only need to see the instructions once to get going.

Twitch extension metrics dashboard.

I also have a Selenium script that runs the following:

  • open all registered mailbag extension users twitch channels
  • scan the source code for a secret div tag I assigned in my extension
  • if found, add that user to a csv and increase counter by 1
  • this provides me with another sanity check for how many of my registered users have the extension activated on their channel Marketing and Outreach At this point, I haven't done any marketing. Users have found my extension via the Twitch Extension Library. I plan to market in the near future, but I am not in a hurry do to other projects.

User Feedback

Periodically, I send short questionnaires to registered users. I let the answers guide my updates and features. Here is an example:

Users wanted to customize the design of the extension to align with their brands

I added a simple feature (as seen below) to accomplish this — the preview on the left side of the screenshot is what the extension will look like on when live on Twitch.tv

Companion Web Application

I built a web application (https://www.mymailbag.app) that runs separately from the extension. It is comprised of 3 functions:

A marketing page / basic informational website REST API User Dashboard Rest API Waits for a request coming from the Twitch extension with some data —> examines data and decides which user to assign the data.

User Dashboard

A dashboard for users to log into with their Twitch credentials (OAuth2)

This allows extension users to see who subscribed to their list, allows to adjust configuration values, and customize the look of their extension. I run Google Analytics on this site as well so I can compare metrics with what Twitch gives me. Most important thing here is having a load balancer and docker containers to spin up new instances whenever the API is under heavy-load.

mymailbag user dashboard

Current State of Project

Although I have > 100 active users, there is one large problem... The majority of streams on Twitch have few to no viewers, therefore, nobody to enter email addresses into the Twitch extension. I have had only 2 users with audiences > 1000 and once their usual number of recurring audience members enters their emails, the extension just sits and collects dust. Streamers would have to keep a flow of new audience members coming to their channel and entering their emails in order for this extension to be consistently useful. For this reason, I haven't decided to start charging for this extension service and will not until I can prove there is ongoing benefit to its use.