Plugins
Templates

Twitch - Chat-n-Stream Plugin

Link to plugin page: https://zeroqode.com/plugin/twitch---chat-n-stream-1533644061224x701983720989786100

Introduction

Drop live Chat elements & Video streaming elements in your app and create your own audiences experiences using bubble logic.

Place the element on the page and choose what Twitch features to include. Includes a chat window element, a video/stream/chat-split element, api calls & is also an authentication provider

Prerequisites

To interact with plugin and establish connections with API calls, you need a client ID. To receive one, log into the Twitch developer console.

How to setup

I. Getting the Plugin keys

  1. Access Twitch Developer URI: https://dev.twitch.tv/

  2. Select Apps Tab

  3. Click Register Your Application

  4. Enter an App Name and your OAuth *redirect URI (*where your users are redirected after being authorized)

  5. Select App Category

  6. Click "Create App"

  7. Click Manage to access the client ID and client secret.

8. To get the client secret click the button "New secret" to obtain the secret key .

Note: Save the secret, as after you leave the page it will disappear. For more information about authentication see the Authentication Guide.

Warning: App names should not include “Twitch” (as an exact or fuzzy match), or registration will fail.

II. Setting up the Plugin with the keys

9. Insert the Client ID and Client Secret in the same fields in the plugin.

10. After the previous step, use plugin elements to start working with plugin actions/calls by placing element(s) on page.

Plugin Element Proprieties

The plugin contains Twitch Embedded and Twitch Chat elements that should be used on the page in order to set up the Twitch process within the Bubble.

Twitch Embedded

This element is for embedding videos and streams in your page. The element has properties for setting search proprieties :

  • Layout - the dropdown menu with only two options: 'video-and-chat' and 'video'.

  • Channel - the channel ID (optional)

  • Video ID - the video ID (optional)

  • Collection - the collection (optional)

  • Allow Full Screen? - the checkbox to enable/disable the fullscreen mode.

  • Autoplay - the checkbox to enable/disable autoplay.

  • Chat Type - the dropdown with only two options: default and mobile types.

  • Font Size - the dropdown with three options: small, medium and large size.

  • Muted - the checkbox for mute/unmute the video.

  • Play Inline (IOS) - the checkbox for use inline playing. Only for iOS devices.

  • Theme - the dropdown to select the lite or dark theme.

  • Start From (opt) - field to insert the time from which you want to start the video

Twitch Chat

This element is for embedding chat in your page. This element has only two properties:

  • Chat Username - the username (login).

  • Domain - Domain(s) that will be embedding Twitch.

Element Actions

  1. Update Chat Username - this action is to update user's chat username

Proprieties:

Element - Twitch Chat Chat Username - Twitch username which needs changed

Plugin Actions

  1. Twitch Authorization - this action is used to authorize your account.

Action properties:

Client ID: Client ID taken from twitch dev portal Redirect URI: Redirect URI registered during the signup process step on twitch side Scopes: List of scopes which are required to access activity (should be comma separated)

Plugin Data/Action Calls

Data Calls

  1. Twitch - Get Channels - This call is a Data call type and a JSON data type.

    It is a GET request that is used to get a channel object based on a specified OAuth token. - To view returned values, please see Twitch doc for more details: https://dev.twitch.tv/docs/v5/reference/channels

  2. Twitch - Get Stream - This call is a Data call type and a JSON data type.

    It is a GET request that is used in order to get stream information (the stream object) for a specified user. - To view returned values, please see Twitch doc for more details: https://dev.twitch.tv/docs/v5/reference/streams#get-stream-by-user

  3. Twitch - Check User Auth Times & Links

    - This call is a Data call type and a JSON data type. - To view returned values, please see Twitch doc for more details: https://dev.twitch.tv/docs/v5

  4. Twitch - Get Chat Emotions - This call is a Data call type and a JSON data type.

    It is a GET request that is used in order to get all chat emoticons (including their images). Caution: This endpoint returns a large amount of data. - To view returned values, please see Twitch doc for more details: https://dev.twitch.tv/docs/v5/reference/chat#get-all-chat-emoticons

  5. Twitch - Get Teams - This call is a Data call type and a JSON data type.

    It is a GET request that is used in order to get a specified team object. - To view returned values, please see Twitch doc for more details: https://dev.twitch.tv/docs/v5/reference/teams#get-team

  6. Twitch - Get User - This call is a Data call type and a JSON data type.

    It is a GET request that is used in order to get a user object based on the OAuth token provided. - To view returned values, please see Twitch doc for more details: https://dev.twitch.tv/docs/v5/reference/users#get-user

  7. Twitch - Get Ingests - This call is a Data call type and a JSON data type.

    It is a GET request that is used in order to get a list of Twitch ingest servers. - To view returned values, please see Twitch doc for more details: https://dev.twitch.tv/docs/v5/reference/ingests#ingests-reference

  8. Twitch - Get User Channels / Links

    - This call is a Data call type and a JSON data type.

    It is a GET request that is used in order to get a channel object based on a specified OAuth token. - To view returned values, please see Twitch doc for more details: https://dev.twitch.tv/docs/v5/reference/channels#get-channel

  9. Twitch - Search Channels

    - This call is a Data call type and a JSON data type.

    It is a GET request that is used in order to search for channels based on a specified query parameter. - To view returned values, please see Twitch doc for more details: https://dev.twitch.tv/docs/v5/reference/search#search-channels

  10. Twitch - Get users by login - This call is a Data call type and a JSON data type.

    It is a GET request that is used in order to get a specified user object. - To view returned values, please see Twitch doc for more details: https://dev.twitch.tv/docs/v5/reference/users#get-user-by-id

Action Calls

11. Twitch - Get tokens

- This call is a Action call type and a JSON data type. It is a GET request that used as action in workflow to get token authorization for the user

Workflow example

For this plugin example we'll show user authentication and authorization process on Bubble.

  1. First set up a workflow to start the action on a button click and create first step by making changes user's field for redirect uri for an existing one

2. Next step in workflow on the action a button click and create a new user's field for redirect uri when there is none

3. Final step in the workflow to login and authorize user is to use action from plugin, where we provide parameters accordingly.

4. Done. The user should be authorized and logged in the system with his Twitch Account.

Changelogs

Update 13/01/21 -

  • Updated Authorization and endpoints URI

  • Moved to Twitch API v5

  • Updated Demo Page with latest changes

Demo to preview the settings: