{"id":27200,"date":"2021-03-26T16:58:29","date_gmt":"2021-03-26T21:58:29","guid":{"rendered":"https:\/\/golightstream.com\/?p=27200"},"modified":"2021-03-26T16:58:29","modified_gmt":"2021-03-26T21:58:29","slug":"3rd-party-integration-tutorial","status":"publish","type":"post","link":"http:\/\/dev.prlxweb.com\/golightstream\/3rd-party-integration-tutorial\/","title":{"rendered":"Tutorial: 3rd Party Integration Layers"},"content":{"rendered":"\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
<\/div>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t

What are 3rd Party Integrations?<\/h3>

3rd Party Integration layers allow you to bring in dynamic content from other websites. Sites like Rainmaker<\/a><\/b>, Streamlabs<\/a><\/b>, and Streamelements<\/a><\/b> are a great way to showcase recent subscribers, donations, stats from your game, and more.\u00a0Personalized messages are a great way to engage your audience and encourage more active participation in the stream. In this post, we\u2019ll be going over just how easy these integrations are to add and use. Let\u2019s get started.<\/span><\/p>

Adding the 3rd Party Layer to Lightstream<\/h3>

Every stream integration works similarly in Lightstream. Each of them outputs stream graphics to a URL link that you\u2019ll copy and paste into your scene. First you’ll add a new layer and select 3rd party integrations. As you can see from the supported 3rd Party Integrations<\/a><\/b> list, there\u2019s a bunch of services available that you can add to your project.\u00a0<\/span><\/span><\/p>

If you don\u2019t see the one you want to use, you can try the Browser Source<\/a><\/b> option which will pull in any web link you paste into it. Some websites block embedding and will prevent them from loading in Lightstream \u2013 you\u2019ll have to experiment and see what works. For overlay developers our previous Blog post HERE<\/a><\/b> has a more extensive breakdown ensuring compatibility with\u00a0<\/span><\/span>Lightstream Browser Source layers.<\/span><\/p>

For this example, I\u2019m going to add a Rainmaker layer. Rainmaker is a full overlay editor that supports interactions like alerts, tipping, and a chat bot.\u00a0<\/span><\/span>A placeholder for your content will appear on the canvas. Please note that the logo in the project area will not display on stream, it\u2019s merely to demonstrate where the overlay will appear.<\/span><\/p>

You can then retrieve your overlay URL to copy into layer on your scene. I\u2019ve already setup an overlay to use in my project \u2013 so let\u2019s hop over to Rainmaker and grab it.\u00a0<\/span><\/span><\/p>

Loading in and testing your 3rd Party Layer<\/h3>

I’ll navigate to my Rainmaker overlays dashboard section to copy the URL from my overlay list there or in the bottom right corner of the Rainmaker overlay editor itself. Then paste the URL into the Rainmaker layer of my project’s scene in Lightstream.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t


You’ll see the layer update with the overlay in your scene that you created. If the overlay includes an interactive feature like an alertbox for example, you can also use the test button features on the site to see how your alerts would look on stream. For Rainmaker you’ll find that test option at the bottom of your overlay editor.<\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t


Resizing vs Scaling your 3rd Party Layer<\/span><\/p>

3rd Party Integration layers are unique in that they have two different sizing options. Dragging while \u201cResize Area\u201d is selected changes the size of the box the content loads into. You can think of this like resizing your browser. If there\u2019s responsive content, it will adjust to fit into the space available.<\/span><\/p>

Scaling will keep the proportions of the overlay intact, see how everything proportionally gets smaller or larger as I drag?\u00a0<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t

This is just one example of how to use our 3rd Party Integration layers. There are a bunch of options to add dynamic content to your stream including adding your own custom overlay through the Browser Source layer. You should definitely play around and explore all of your options and see what best fits your needs.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"

https:\/\/youtu.be\/A35Lvw4Vz1U What are 3rd Party Integrations? 3rd Party Integration layers allow you to bring in dynamic content from other websites. Sites like Rainmaker, Streamlabs, and Streamelements are a great way to showcase recent subscribers, donations, stats from your game, and more.\u00a0Personalized messages are a great way to engage your audience and encourage more active participation […]<\/p>\n","protected":false},"author":1,"featured_media":27237,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[14,59,128,138],"class_list":["post-27200","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-growth","tag-3rd-party-integrations","tag-gamer","tag-studio","tag-tutorial"],"acf":[],"_links":{"self":[{"href":"http:\/\/dev.prlxweb.com\/golightstream\/wp-json\/wp\/v2\/posts\/27200","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/dev.prlxweb.com\/golightstream\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/dev.prlxweb.com\/golightstream\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/dev.prlxweb.com\/golightstream\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/dev.prlxweb.com\/golightstream\/wp-json\/wp\/v2\/comments?post=27200"}],"version-history":[{"count":0,"href":"http:\/\/dev.prlxweb.com\/golightstream\/wp-json\/wp\/v2\/posts\/27200\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/dev.prlxweb.com\/golightstream\/wp-json\/wp\/v2\/media\/27237"}],"wp:attachment":[{"href":"http:\/\/dev.prlxweb.com\/golightstream\/wp-json\/wp\/v2\/media?parent=27200"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/dev.prlxweb.com\/golightstream\/wp-json\/wp\/v2\/categories?post=27200"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/dev.prlxweb.com\/golightstream\/wp-json\/wp\/v2\/tags?post=27200"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}