FAQ Widget
Thanks for downloading our widget!
Here you will find instructions on how to set everything up and an in-depth description of its possibilities.
⚠️ Take note: This widget is hosted on StreamElements and works only with StreamElements donations — make sure you have a StreamElements account before setting it up!
Widget Installation
- Log in to StreamElements with your Youtube or Twitch account
- Go to the “2. Widget” folder in the package you’ve downloaded
-
Pick the file that corresponds to your streaming platform (Twitch or YouTube) and double-click to install it.
Voila! Your widget is installed!
Widget Customization
-
Pick your widget in your StreamElements dashboard and click “Edit”
-
Click on “Layers” and go to your widget.
- Go to the “Settings” tab
- Woohoo, here you can customize everything to your taste :)
⚠️ IMPORTANT
For all of your customizations to take effect, you need to press "Save" in the top right corner of the editor and refresh the page before adding the widget to your streaming software!
Customization Fields
🎯 Content
| Name (UI Label) | Rewritten Description |
|---|---|
| Widget Title Text | Set the big title text at the top of the card (for example, "FAQ"). |
| 1️⃣ Question 1 / Answer 1 | Main FAQ pair. Fill in the first question and its answer. |
| 2️⃣ Question 2 / Answer 2 | Optional second FAQ pair. Leave empty to skip. |
| 3️⃣ Question 3 / Answer 3 | Optional third FAQ pair. Leave empty to skip. |
| 4️⃣ Question 4 / Answer 4 | Optional fourth FAQ pair. Leave empty to skip. |
| 5️⃣ Question 5 / Answer 5 | Optional fifth FAQ pair. Leave empty to skip. |
| 6️⃣ Question 6 / Answer 6 | Optional sixth FAQ pair. Leave empty to skip. |
| 7️⃣ Question 7 / Answer 7 | Optional seventh FAQ pair. Leave empty to skip. |
| 8️⃣ Question 8 / Answer 8 | Optional eighth FAQ pair. Leave empty to skip. |
| 9️⃣ Question 9 / Answer 9 | Optional ninth FAQ pair. Leave empty to skip. |
| 1️⃣0️⃣ Question 10 / Answer 10 | Optional tenth FAQ pair. Leave empty to skip. |
🅰️ Typography & Sizing
| Name (UI Label) | Rewritten Description |
|---|---|
| Font Family | Choose the Google Font family used for all text in the widget. |
| Title & Number Font Weight | Pick how bold the title (FAQ) and the header number should look. |
| Number Font Size (px) | Control the size of the large header number (01, 02, etc.). |
| Question Font Size (px) | Set the font size for the question line. |
| Answer Font Size (px) | Set the font size for the answer paragraph. |
| Question Font Weight | Set how bold the question text should look. |
| Answer Font Weight | Set how bold the answer text should look. |
| Question Marks Size (%) | Scale both decorative question marks and their spacing proportionally. |
🌈 Colors
| Name (UI Label) | Rewritten Description |
|---|---|
| Outer Card Background | Set the background color of the outer white card. |
| Title Text Color | Choose the color of the main "FAQ" title text. |
| Number Text Color | Choose the color of the big header number. |
| Inner Box Background | Set the lilac inner box background behind question and answer. |
| Question Text Color | Choose the color used for the question text. |
| Answer Text Color | Choose the color used for the answer text. |
| Question Marks Color | Choose the color used for the decorative question marks around the title. |
📏 Spacing & Layout
| Name (UI Label) | Rewritten Description |
|---|---|
| Outer Card Corner Radius (px) | Round the corners of the outer white card. |
| Inner Box Corner Radius (px) | Round the corners of the inner lilac box. |
| Card Padding (px) | Set how much padding goes inside the outer card on all sides. |
| Inner Box Padding (px) | Set the padding inside the lilac box around question and answer. |
| Spacing Between Header and Box (px) | Control the vertical gap between the header (title + number) and the inner box. |
| Spacing Between Question and Answer (px) | Control the vertical gap between the question line and the answer text. |
| Responsive Width (max) | The widget is responsive up to 1920px wide. It scales down on smaller canvases. |
⚙️ Rotation & Animation
| Name (UI Label) | Rewritten Description |
|---|---|
| Time Per Question (seconds) | Set how long each question stays on screen before switching to the next one. |
| Text Animation Style | Choose how the question, answer, and number animate when they change (slide up/down, soft fade, or pop). |
👁️ Display Mode
| Name (UI Label) | Rewritten Description |
|---|---|
| Display Mode | Choose how the widget appears: Automatic Pop-up, Command Triggered, Stream Events, or Always Visible. |
| Pop-up Frequency (seconds) | In Automatic mode, how often the widget should appear. |
| Amount of Loops (full question cycle) | For all modes except Always: how many complete passes through all questions before the widget hides. |
💬 Chat Command
| Name (UI Label) | Rewritten Description |
|---|---|
| Chat Command | The chat message (e.g., !faq) that triggers the widget in Command mode. |
| Command Permissions | Who is allowed to trigger the command (Broadcaster, Moderator, VIP, Subscriber, Everyone). |
🎟️ Stream Events
| Name (UI Label) | Rewritten Description |
|---|---|
| ✨ Show on Follow | Show the widget when a new follower event is received. |
| ⭐ Show on Subscribe/Resub | Show the widget on a subscription or resubscription event. |
| 🎁 Show on Gift Sub | Show the widget when a gifted subscription is detected. |
| 🚀 Show on Raid | Show the widget when a raid event happens. |
| 💎 Show on Cheer | Show the widget when bits are cheered. |
| 💎 Minimum Bits to Trigger | Only trigger on cheers at or above this number of bits. |
| 💵 Show on Tip/Donation | Show the widget on a tip/donation event. |
| 💵 Minimum Tip Amount to Trigger ($) | Only trigger on tips at or above this dollar amount. |
| ⏳ Event Cooldown (seconds) | Minimum time between accepted event triggers. |
How to Add it to the Streaming Software?
OBS Studio
- Copy the URL of your Widget from the StreamElements dashboard
- Open OBS Studio
- Click “Add Source” (plus icon) in the Sources section.
- Add a “Browser” source, give it a name, and press “Ok”
- Paste the URL you’ve copied
- Set the width to 1920 and the height to 1080
- Press “Ok” and we’re done!
Streamlabs Desktop
- Copy the URL of your Widget from the StreamElements dashboard
- Open Streamlabs Desktop
- Click “Add a new Source” (plus icon) in the Sources section.
- Choose “Browser Source”, give it a name, and press “Add Source”.
- Paste the URL you’ve copied previously
- Set the width to 1920 and the height to 1080
- Now press “Close” and that’s it! Your widget is ready to use!