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 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. SSN에서 다음을 여세요: 그래픽 투표 → 투표 옵션 (Graphical Poll → Poll Options). 선택할 항목: Default — 선택 위치: Poll Style/Theme as the starting point for this example, and turn on 투표 활성화 (Enable Poll).
2. Copy the Graphical Poll link. In OBS, add or open its 브라우저 소스, 다음은 비워 두세요: 로컬 파일 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한 다음 클릭합니다: 확인. 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= 또는 &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 형식: my-poll.html. Keep it beside the original, at the top level of the folder.
3. 열기 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, 그리고 .poll-instruction. A layout change may also need matching edits in both updatePollOptions() 그리고 updatePollResults(), which build the answer rows.

4. Open your edited poll in OBS

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

1. 드래그할 항목: 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 로컬 파일 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 현재 페이지의 캐시 새로고침 (Refresh cache of current page) 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 정확한 투표만 (Exact vote only).
2. Send #coffee 그리고 #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. 테스트 해시태그 위치 무관 (Hashtag anywhere) with a longer message such as I vote #coffee today. Check 투표 종료 (End Poll), 투표 초기화 (Reset Poll), 그리고 투표 활성화 (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.