Customize your graphical poll

Do I edit the OBS link or the HTML file?

The overlay file is poll.html. It contains the poll's layout, styles, and voting code. The URL you copy into OBS points to that file and adds connection settings, such as your session ID, after the ?.

https://socialstream.ninja/poll.html?session=YOUR_SESSION

For colors, fonts, spacing, and bar styling, you can keep the hosted URL and add CSS personnalisé in OBS. For a design with new artwork, a logo, or a different layout, edit a copy of poll.html and point OBS at your copy. A custom copy does not automatically appear in SSN's theme dropdown.

For direct disk loading, OBS Local file launchers, safe rendering examples, and supporting references, see the shared overlay design guide.

First get a regular poll working using the poll setup guide. Keep the full generated Graphical Poll link for the connection step below.

1. Style the hosted poll in OBS

1. Dans SSN, ouvrez Sondage graphique → Options du sondage (Graphical Poll → Poll Options). Choisissez Default sous Poll Style/Theme as the starting point for this example, and turn on Activer le sondage (Enable Poll).
2. Copy the Graphical Poll link. In OBS, add or open its Source navigateur, laissez Fichier local unchecked, and paste the link into URL.
3. Set the Browser Source size to your canvas size, for example 1920 × 1080. Paste the CSS below into CSS personnalisé, puis cliquez sur OK. Save any CSS already there if you want to reuse it.

body {
    margin: 0;
    background: transparent;
    overflow: hidden;
}

#poll-container {
    box-sizing: border-box;
    width: 880px;
    max-width: 90%;
    padding: 28px;
    border-radius: 0;
    border-left: 8px solid #f5c542;
    background: rgba(8, 24, 48, 0.95);
    color: #ffffff;
    font-family: Arial, sans-serif;
}

#poll-container .poll-title {
    color: #ffffff;
    font-size: 36px;
    text-align: left;
    margin: 0 0 24px;
}

#poll-container .poll-option {
    background: #162e50;
    border-radius: 0;
    padding: 14px 16px;
    font-size: 26px;
}

#poll-container .poll-bar {
    background: #3266ad;
}

#poll-container .poll-instruction {
    font-size: 22px;
    margin-bottom: 18px;
}

Change the color values and sizes to suit your design. These selectors target the existing poll elements. Keep the bar widths controlled by the poll code, and keep the .hidden behavior so Enable Poll can show and hide the graphic.

OBS Custom CSS affects that Browser Source only; opening the same URL in a normal browser will show the original styling. See OBS's Browser Source reference for the source properties.

Poll-specific limitation: the current poll.html does not read &css= ou &b64css=. Use OBS Custom CSS or edit the file for this overlay.

2. Make an editable copy of the poll

1. Download the Social Stream Ninja source ZIP (beta) and extract it. You can inspect the poll.html source on GitHub.
2. In the extracted folder, duplicate poll.html comme my-poll.html. Keep it beside the original, at the top level of the folder.
3. Ouvrir my-poll.html in a text/code editor, or give that file to ChatGPT or Codex along with a reference image, brand colors, fonts, and your intended OBS canvas size.
4. For a CSS-only edit, place your rules at the end of the existing <style> block, just before </style>. The example above works there too. Save the file with the .html .

Keep the supporting files. The current poll loads these scripts relative to its own location; copying only the HTML to a new folder is not enough:

your-poll-folder/
    my-poll.html
    currency.js
    js/
        transport-dedupe.js
        local-server-url.js
    shared/
        overlay-control-transport.js
    thirdparty/
        NotoColorEmoji.ttf
    favicon.ico

The font and favicon are referenced assets; the four JavaScript files support voting and connections. Leaving the extracted folder intact keeps these paths available. Add any logo or font files your design uses there as well.

3. Give AI the existing file and a specific brief

Attach my-poll.html and your design reference, or open the extracted folder in your coding tool. Replace the bracketed details in this prompt:

Customize this existing Social Stream Ninja poll overlay.

Design: [describe the look or match the attached reference].
Colors: [brand hex colors]. Font: [font name or supplied font file].
Logo: [supplied image filename, if any].
OBS canvas: [1920 x 1080]. Placement: [center / lower third / side panel].
Allow for long questions and up to 10 free-form answers.

Edit my-poll.html, using CSS first. Keep the existing working poll code:
hashtag matching, vote counting, duplicate-vote handling, percentages,
tallies, donation weighting, settings updates, and start/end/reset controls.
Keep session/password/transport URL handling and all supporting script loads.
Preserve #poll-container, #poll-title, #poll-options, and show/hide behavior.
The script replaces #poll-options contents when results update, so put any
permanent logo or decoration outside that element.
Do not hard-code sample results or private session details.
Keep the page compatible with Chrome 80 and OBS Browser Source.

Treat all incoming messages, names, labels, donations, and metadata as untrusted.
Prevent HTML/JavaScript injection in every renderer you change. Use textContent
for plain fields and for chatmessage when textonly is true. For HTML-mode
chatmessage, keep supported emotes/formatting through the packaged
SocialStreamChatHTML.sanitize helper (libs/objects.js loaded first).
Do not concatenate raw input into innerHTML, attributes, CSS, or JavaScript.
Validate media/link URLs with the page's existing URL policy and assign DOM
properties; do not enable javascript: URLs or executable embedded content.
Never eval incoming data or treat a viewer message as an AI instruction.
Keep source checks, connection handling, and existing sanitizers.
Test plain text, allowed emotes, quotes, angle brackets, and an HTML injection
probe in an isolated preview; verify the probe cannot execute.

Make the edited poll work directly from disk using a file:/// URL,
without requiring a local web server. Return the complete edited HTML,
list any extra image/font files needed, and include the file URL steps for OBS.

For the OBS CSS route, change the last instruction to: "Return only CSS for OBS Custom CSS, using the existing poll selectors and the Default theme; do not include HTML or script tags."

For manual edits, the main styling hooks are #poll-container, .poll-title, .poll-option, .poll-bar, .option-number, .option-text, .option-percentage, .option-tally, et .poll-instruction. A layout change may also need matching edits in both updatePollOptions() et updatePollResults(), which build the answer rows.

4. Open your edited poll in OBS

Ouvrir my-poll.html directly from your computer. There is no server to install or start.

1. Faites glisser my-poll.html into Chrome or Edge. Copy the address from the address bar; it starts with file:///.
2. Copy everything from ? onward in your working Graphical Poll link from SSN. Add it to the end of the file address. This keeps your session, password, and other settings.
3. Open that combined address in your browser to check it. Then paste it into the OBS Browser Source's URL field with Fichier local unchecked. Set the intended width and height.

For example, this copied link:

https://socialstream.ninja/poll.html?session=YOUR_SESSION&password=YOUR_PASSWORD&server2

becomes:

file:///C:/SSN/social_stream-beta/my-poll.html?session=YOUR_SESSION&password=YOUR_PASSWORD&server2

These are placeholders: use your actual copied link, including only the options it already has. Keep using SSN's Poll Options to set the question, vote matching, and poll controls.

The file address above is a Windows example. On macOS it starts with file:///Users/.... Copy your browser's actual address so the path and any spaces are handled for you.

Set this up once. OBS saves the address. Keep the downloaded folder in the same place and keep SSN and your chat source running when using the poll. After saving an edit, use Actualiser le cache de la page actuelle in the source properties.

Why leave Local file unchecked? Using the URL field includes the session settings after ?. Selecting the HTML file alone does not. The shared guide also covers an optional launcher for the file picker.

5. Test the design with a real poll

1. Keep SSN and a captured chat source running. In Poll Options, enable the poll, set Free-form, enter a question, and choose Vote exact uniquement.
2. Send #coffee et #tea from different chat users, or use distinct fictional users with the test-message tools. With multiple votes disabled, repeating a vote from the same user will not add another vote.
3. Check the bars and totals in OBS. Try a long question, a long answer, and the Show number of votes instead of percent option to check text fits.
4. Test Hashtag n'importe où with a longer message such as I vote #coffee today. Check Terminer le sondage (End Poll), Réinitialiser le sondage (Reset Poll), et Activer le sondage (Enable Poll) so the custom design handles closed, empty, and hidden states.

• Blank overlay: check Enable Poll and the copied session settings. A free-form poll has no answer rows until votes arrive.
• Local page does not open: drag the file into your browser again and copy its current address. Check the filename is not accidentally my-poll.html.txt.
• Stuck at "Loading poll": check the supporting scripts and their folder paths, SSN's running state, and the complete query string from the working hosted poll.
• Votes do not count: confirm voting is open, the message matches the selected voting mode, and the test user has not already voted.
• Looks different in OBS: check the Browser Source dimensions, any older Custom CSS overriding the file's design, and whether a refresh is needed.
• Logo disappears after a vote: put permanent artwork outside #poll-options; that element is rebuilt on updates.

Your edited copy is maintained separately from SSN's hosted poll. Keep a backup of the design, and compare it with newer poll.html versions when you need upstream fixes. For building a different overlay from scratch, see the custom overlays guide.