Chat Connect Pro Setup Guide

Transcription

1 Chat Connect Pro Setup Guide Wordpress plugin data manager Live Streaming / Video Production Data Feed

2 Plugin Setup Setup Process: Step 1 Purchase Plugin Step 2 Install plugin by uploading plugin inside wordpress. Click Plugins and Add New Step 3 To find installed plugin go to Settings Tab and click Live Streaming Step 4 Connect to Google API. Follow instructions on setting up your Google OAuth Credentials at Step 5 Connect to the Google Account you will be live streaming with.

3 YouTube API Setup Google API Console Step 1. In order to connect to your Youtube Account, you need to create a new project in the Google API Console and activate the YouTube API in "APIs & auth > APIs". (These three fields will need to be filled in to access your Google YouTube Account. )

4 YouTube API Setup Google API Console Step 2. On your Project Dashboard click Enable API. You will want to enable the YouTube API v3 API.

5 YouTube API Setup Google API Console Step 3. Then, create an OAuth Client ID in "APIs & auth > Credentials". Enter this URL for the Redirect URI field: m/wp-admin/options-general.php?page=youtube -live-streaming-chat Step 4. Then all you need to do is create an API key.

6 Plugin Setup Setting up your live stream data: Step 1 Select the live event you want to connect to. You must click the save button once you have selected the live event from the dropdown menu. Step 2 You can now embed the chatroom using the shortcode [chatroom] on any post or page inside wordpress. This will dynamically change when you save a new live stream Step 3 Make sure to hit the Save Button. Step 4 - You can now use your live data in a the lower thirds title creator area. OR connect the live JSON/XML data to your data source manager.

7 Plugin Setup Setting up your live stream data: Step 1 Select the live event you want to connect to. You must click the save button once you have selected the live event from the dropdown menu. Step 2 You can now embed the chatroom using the shortcode [chatroom] on any post or page inside wordpress. This will dynamically change when you save a new live stream Step 3 Make sure to hit the Save Button. Step 4 - You can now use your live data in a the lower thirds title creator area. OR connect the live JSON/XML data to your data source manager.

8 Facebook Setup Facebook Live API - Wordpress Plugin Setting up your Facebook live stream data: Step 1 Create a Developer Account at and create an application. Step 2 - Create and app and locate your App ID, App Secret and Facebook Page ID. You do not have to select a type of app just click settings. To access your Facebook's Page ID: Open your Facebook page. Click the About tab. Scroll down to the bottom of the Page Info section. Next to Facebook Page ID, you can find your page ID

9 Facebook Setup Facebook Live API - Wordpress Plugin Website Association: Step 3 - Make sure you have setup your application with the website you are installing the wordpress plugin on. Facebook will reject the authorization without this association. To do this you need to Add Platform ---> Website and add your website. Make sure to use the www if you see that in your domain address.

10 Facebook Setup Facebook Live API - Wordpress Plugin Website Association: Step 4 - Once you have successfully logged into your facebook account you will see a dropdown menu of your posts. Choose the live stream post that you want to pull data from and you can now use that data via JSON, XML or the lower thirds title creator.

11 Lower Third Creator Step 1 - Make sure you have connected to your live stream. Step 2 - Choose to enter custom text to populate your live title Step 3 - Choose a time loop for data to be displayed (loop does not affect custom text). Step 4 - Choose a Window Size for the web browser input (used to pull in live titles into OBS, xsplit, Wirecast or vmix) Step 5 - Upload your PNG file with your title (check download folder for included files or make your own).

12 Lower Third Creator Step 6 - You can use the draggable fields to popular your lower third which is shown in the space you have created. Step 7 - Simply drag each variable onto the space you would like to have the data displayed. Step 8 - If you are looking for a starter pack of PNG files click here. Otherwise go head and get creative! Create your own custom PNG files to upload and display your live data.

13 Lower Third Creator Step 9 - You can style each field in the Field Style area of the Wordpress Lower Third Title Creator. Step 10 - Simple enter in the font, size, color and other options you would like to use for each variable.

14 Connect Lower Third to Streaming Software Connecting to Wirecast, vmix, OBS, xsplit At the top of the plugin you will find the click here button has generated a live URL. Use this URL to bring in the webpage into your live streaming software via a Web Browser input You will find that the background is transparent so you will only have a layer for your lower third with the included live data.

15 Connect Data to Wirecast Connecting data to Wirecast Open Wirecast Add a Web Browser Input Enter the web browser URL for your title editor If you are populating data onto an existing Wirecast Title you can simply upload a transparent png file and simply overlay the data onto Wirecast. You may need to crop the edges of your input or increase the scale to fit things properly

16 Connect Data to vmix Connecting data to vmix Open vmix Open Data Sources Select JSON from plus button menu Enter URL of JSON from Wordpress You can now connect data to any title in vmix!

17 Learn more at