Animated Social Media Popup for Twitch, Hitbox, or YouTube Stream

This guide will show you how to add a great looking animated social media popup to your stream, that displays your different social networks, in just a couple of minutes. This can be used for your Twitch, Hitbox, or YouTube Gaming streams in both Xsplit and OBS!

VIEW THE UPDATED VERSION HERE!

I created this social media popup for my own channel, but decided to figure out a way that I could share it with others. If you follow my instructions below, you should have no problem getting this set up. It currently supports Twitch, Twitter, Facebook, Instagram, Youtube, Tumblr, Patreon, Paypal, SnapChat, Xbox Live, Playstation Network and Steam… however I may be adding more in the future.

To begin, go to this link.  I don’t want to spend too much time on what exactly you’re seeing, but basically it’s the code to make this popup work, however I set it up to where you should be able to customize it with your information, and enable or disable any networks of your choice.

Just follow these instructions:

Customizing your settings

First, let’s enter in our network names or addresses. You will only need to change the ones that you will be using. It’s extremely important to leave the formatting of the code exactly how it is. So if you made a mistake, or things aren’t working properly, just refresh the page and start again. All we need to do is replace the word “change this” inbetween the quotations marks with our own networks names. As long as you only change the word inside the quotation marks, everything should work fine.

Update Network Names

For example, I’m going to change “ChangeThis” for the Twitch Name to NerdOrDie, I’ll set my Twitter username to @NerdsPwn and I’ll update the Patreon section To NerdOrDie. Once you’ve updated all the networks to your own, it’s time to enable or disable the networks you’d like to use.  Remember only update the word inside the quotation marks, do not change anything else

By default, all networks are enabled. So, scroll down a bit more and we’ll see “this is where you enable or disable networks”. A 1 means it is enabled where a 0 will mean it will be disabled. So, for my example, I’m going to leave Twitter, Twitch, and Patreon at a 1 to keep them enabled. I’ll simply change the other networks to a 0, to disable them.

Enable or Disable Networks

Finally, the last thing we can customize are the times. There are two times, one for the amount of time each social network displays and another that is delay inbetween cycles of all the networks that we have enabled. The first time we can update is by default it is set at 4. This means our each social network will stay on the screen for 4 seconds. I leave mine at the default value.

Times To Update

The next time represents the amount of time that the animation will pause after it cycles through your networks. This number is in seconds.

By default, it is set at 120 seconds or 2 minutes. If this is too short, you could change the number to something like 900 seconds which will make it display every 15 minutes, or if the pause it too long, drop it to 60 seconds, or 1 minute.

You can see the live results being updated below.

Adding the popup into OBS

Once everything is customized to our needs let’s go ahead and click Save, next click the Share button at the top and then click Export .zip. This will download a zip file with all the files we need. I’m going to open the zip file, and I’ll use WinRar to move the files onto my computer. I’m going to make a folder called SocialPopup on my desktop, you can put your folder wherever you’d like. Now, I’m going to simply drag and drop all the files from the zip folder into my SocialPopup folder.

Folder With Files

Finally, let’s add this into OBS and Xsplit.

For OBS, you’ll need the CLR browser plugin installed. If you don’t have this installed, check out my video about setting this up.

What we need to do is get the file path of the file called Index in our SocialPopup folder. I should note there can be two files named index (most of the time there is only one), we only want the one that is an HTML document, we do not want the XML document.  The easiest way to get the file path is simply double click the index file. This should now open up in your browser, such as chrome, firefox, or internet explorer. If it doesn’t all you need to do is drag the index file into your browser like so. Now, we need to copy the address found in the address bar.

File Path

With OBS open, add a new CLR browser source. Paste the file path into the URL section, and finally let’s change the width to 470 and height to 60.

Adding Into OBS

And that’s it for OBS. You can hit preview and see that it’s working. You can then use Edit Scene to drag it to wherever you’d like in your scene set up!

Adding the popup into XSplit

For Xsplit simply hit Add >Media File and then find the SocialPopup folder. Now, select the file named index, remember, there can sometimes be two files named index, we need to make sure to select the file that an HTML document, we do not need the XML document. Once the index html file is selected, hit open.

Adding Into Xsplit

Sometimes my Xsplit file took a bit of time to load, but after a few seconds it should appear. We can now move the popup to where we would like it. Also, in the settings of this source, we can go into layout and change the width to 470 and the height to 60.

I know this is a bit longer of a tutorial than normal, but it’s something I really thought would be awesome for people to add to their streams. If you use this in your streams or videos please let me know in the comments below.

Update:

CodePen.IO changed the layout of their share and export buttons after this video tutorial was released.

Code Pen update

You can now find the share and export buttons in the bottom right.

  • Derek

    Hopefully everyone liked this tutorial and had no problems setting it up!

    • [ZZon]JoshOnFire

      Hey – I edited it all just fine, followed all the steps… the preview is working just fine – but when I add it to OBS after downloading, all the changes I have made are gone, it scrolls through every network, and all my username info has reverted to “changethis” – Any tips?

      • Derek

        Sounds like you’re not “forking” the file first, as recommended. Give that a shot, let me know if it works.

  • Mees Kalkhoven

    i cant download this

    • Derek

      Check the bottom right, CodePen changed on us.

      • It’s Matthew

        It’s under Free Resources yet the only way you can save your configurations is to pay…Nice…

        • Derek

          Nope, it’s still free. I just tested it out and it works fine. On CopePen hit fork > make your changes > hit save at the top > hit Share on the bottom right.

          I don’t run the CodePen site, but if for some reason anything changes, i will be updating the guide. Let me know if you have any more issues.

          • l’Homme Bonobo

            that export buttont isn’t there qnymore and i can’t find it :'(

          • NerdOrDie

            It should be in the bottom right now, hope that helps!

  • twohlix

    Just a heads up. The imgur links your codepen now respond with a 403.

    Pretty neat tutorial tho. I’ll probably use this type of idea in my streams.

    • Derek

      Should be fixed, thanks for the heads up… I think the links were asleep 😀

  • Eric Rusch

    using the BrowserSource add-on for OBS Multiplatform, it crashes OBS with the index.html file 😛 any suggestions?

    • Eric Rusch

      got it, didn’t Save before Exporting 😛 D’OH!

  • Mallory

    Do you have to have an account and pay for it to be able to do this? I thought if it was under free resources it was free 🙁

    • Derek

      No account is needed to set this up. If you’re having trouble stop by my stream – I’ll happily walk you through the process. CodePen has updated the layout a bit, so if you’re looking for export, look at the bottom right.

      • Mallory

        I exported it and saved it, but when I try to open the index folder (I only had one) in a browser nothing comes up

        • Derek

          Any luck here? If not, stop by my stream sometime and I’ll walk you through.

  • Gfox

    @Derek Hi, i’ve customised the pop up to have a grey background, but id there anyway that I can customer it so that it has a black border around the social box as well as the animated grey box that used to be white? Thanks

  • Hi, how can I use this in a YouTube video? Not a stream

  • Josh

    can you add discord??

  • Dreamerbg69

    Can you add a GOG Galaxy icon too ? Tried myself but cant really do the image proparly

  • Clocktower

    when i click the codepen link i don’t see any animated preview like you see in the video