Link to plugin page: https://zeroqode.com/plugin/twitch---chat-n-stream-1533644061224x701983720989786100
Demo to preview the settings:
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
- Access Twitch Developer URI: https://dev.twitch.tv/
- Select Apps Tab
- Click Register Your Application
- Enter an App Name and your OAuth *redirect URI (*where your users are redirected after being authorized)
- Select App Category
- Click "Create App"
- 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
- Update Chat Username - this action is to update user's chat username
Proprieties:
Element - Twitch Chat
Chat Username - Twitch username which needs to be changed
Plugin Actions
- 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 that are required to access activity (should be comma separated)
Plugin Data/Action Calls
Data Calls
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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 an Action call type and a JSON data type.
It is a GET request that is used as an action in workflow to get token authorization for the user.
Workflow example
For this plugin, we'll show an example of user authentication and authorization process on Bubble.
- 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 user login and authorization workflow is to use action from the plugin, where we provide parameters accordingly.
4. Done! The user should be authorized and logged into the system with his Twitch Account.
