¶ Twitch / YouTube User Cards
One effective strategy to increase engagement during your livestream is to incorporate personalized alerts. For example, when a viewer donates to or subscribes to your channel, you can display a thank-you message with their name but also add their profile picture as an added touch of intimacy. This can encourage other viewers to take similar actions, and make the overall viewing experience more interactive.
Polypoplive offers a unique feature called the User Card, which is a 3D element that can move and rotate in the 3D space. This allows you to create visually engaging animations, such as having the card enter the scene showing only the back side and then flipping to reveal the other side with the user's profile picture and name. This adds a touch of creativity and can make the overall viewing experience more interactive and enjoyable for your audience.
Polypop offers a range of options to enhance the visual experience of your livestream by creating dynamic and engaging backgrounds and effects that showcase a collection of your subscribers, viewers, and chatters' profile pictures. This is a great way to create a sense of community and connection among your viewers, making the overall viewing experience more enjoyable.
This document will provide an example of a user card for Twitch. The instructions provided in this document can also be applied to create a user card for YouTube.
¶ Install the User Card Plugin
PolypopLive has a big plugin library you can use. In order to keep Polypoplive lean, these plugins are not automatically installed. You can browse through the plugins, and choose the ones you want to download.
-
Click on the Plugins button located at the top of the UI.
-
Select the 3D Elements category from the menu.
-
Find the User Card plugin and click its "Install" button.
If a plugin is already installed it means you already have it. You do not need to install it again.
If you open a project that has a plugin that you previously installed but later uninstalled, PolypopLive will automatically reinstall the missing plugin, to ensure that the project loads correctly.
¶ Adding a User Card element to your project
Now that we installed the User Card plugin, let’s see where it's located in the app and how to add it to our scene.
-
Click on the big + button in the Scene Layout panel.
-
Select the 3D category from the menu.
-
Double-click the User Card icon to add it to your scene.
-
A window will appear, providing the option to choose a Webservice. This is required because the user card presents the profile pictures of your Twitch or Youtube account viewers (or followers or subs etc.).
-
If no Web Alerts option appears in your Library, or you want to add one that is missing, you can click on the + button on the lower left side of the window and choose the Webservice alert you need.
-
For this example, we will choose the Twitch alert option and click okay.
-
A Twitch user card element was added to your scene.
Accordingly, a user card layer was added to the Scene Layout panel.
In the user card properties you can decide what information will be presented on the user card, and how this information will look like.
¶ User Card Properties
To view the properties of the user card, ensure that the user card layer is selected in the Scene Layout panel.
The layer’s properties will be shown at the bottom of the Scene Layout panel.
¶ Visible
The Visible on/off switch lets you choose whether you want your user card to be visible or not.
You could link this property to a hotkey or an alert, for instance.
¶ Cast Shadows
Controls whether the object casts shadows onto itself and other objects.
¶ Source - Web Service
Set the web service to query for user lists
¶ Source - List
Selects the user list from where to fetch user info.
The default setting is a test list that will show random users from Twitch.
The users in the list you’ll choose will update every 60 seconds.
To pick a more relevant option click on the List menu and choose the list you want
¶ Source - User
User to display on the card.
Having a number (using ‘#num’) will choose a user from the list you chose.
If you type a specific user name, the card will show that user name profile - overriding the list you chose.
¶ Face Menu
In the “face” user card menu properties you can change the way the user’s profile picture is presented on the card.
¶ Face menu - Style
Sets the style of the card’s face. Styles define the image and label placement.
There are 10 styles to choose from.
¶ Face menu - Color
Sets the background color of the card’s face
¶ Face menu - Label menu
The Label menu, located inside the Face menu lets you customize the label’s appearance.
- Visible - Shows or hides the user name label.
- Color - Sets the text color of the label.
- Font - Sets the font style of the label.
¶ Back
The back of the card is what you see when you flip the user card.
By default, the back of the card will use your Twitch profile picture as an image texture.
¶ Back menu - Style
Sets the style of the card’s face. Styles define the image and label placement.
There are 10 styles to choose from.
By default, the back of the card will use your Twitch profile picture as an image texture. This is what Polypop’s Twitch profile picture looks like on the back of the card.
¶ Back menu - Texture
You can replace the back of the card image texture by clicking on its “pick” button.
A window will open, that will ask you to either choose a texture from your Library sources or import a new image source.
¶ Back menu - color
Sets the background color of the card’s face
¶ Mods
You can add Mods (modifications) to the user card to enhance and change how they look or function.
To add a mod to the user card, click the "+" button next to the Mods menu.
Mods can be a very powerful tool. To learn more about mods please refer to the Mods document.
¶ Show the profile picture of the viewer who triggers an alert on the user card face
You can show the profile picture of the viewer who triggers an alert on the user card face side.
-
Connecting the alert to the User socket in the card’s properties.
By connecting the wire to the User field, you allow the profile data of the viewer who triggers the alert flow from the alert to the user card.
Once you connect the wire, a wire properties window will open. -
In the wire’s properties window, delete the “<profile_url> text from the “Text To Set” line.
(you can always access the wire properties by clicking anywhere on the wire)
The Text To Set line, should only have the<user_name>text in it. -
Your User card will now show the profile picture of the viewer who triggers the alert you connected to it.
To learn more about how to make an alert show the profile picture of the viewer who trigger it please refer to the How to show the profile picture of the viewer who triggered an alert on Twitch and Youtube article.
¶ Twitch / Youtube User Cards Preset
PolypopLive has a very useful User-Cards preset, that lets you present a collection of user cards, allowing you to create interesting elements and backgrounds with a personal touch.
To add the user cards present you will need to install the Twitch or the YouTube user cards present plugin:
-
Click on the Plugins button located at the top of the UI.
-
Select the Presents category from the menu.
-
Install the Twitch or YouTube (or both) Presets plugins.
-
Click on the big + button in the Scene Layout panel.
-
Select Twitch (or YouTube) category from the menu.
-
Double-click the User Cards icon to add it to your scene.
-
You now have a User Cards Present in your scene.
You can play around with its properties to create interesting compositions and effects.
PolypopLive’s Twitch follower’s User Card Preset background
¶ FAQ - Which profiles are being shown on the user card
As mentioned above in the user properties section, you can control which profiles will be shown on the user card.
The default setting is a “test list” that will show random users from Twitch.
To pick a more relevant option select the user card layer in the Scene Layout panel and under the Source menu click on the List menu and choose the list you want.