From e045fd4e9717492a3ee61b66f9b7395bc1665851 Mon Sep 17 00:00:00 2001 From: "russell@unturf.com" Date: Sat, 14 Mar 2026 11:46:35 -0400 Subject: [PATCH] Add uncloseai widget section to styleguide --- styleguide/index.html | 33 +++++++++++++++++++++++++++++++++ 1 file changed, 33 insertions(+) diff --git a/styleguide/index.html b/styleguide/index.html index 96ae3e6..851728d 100644 --- a/styleguide/index.html +++ b/styleguide/index.html @@ -433,6 +433,39 @@ A living reference for every component, element, & pattern across uncloseai. chat widget via a single script tag. The widget provides free machine learning chat, page translation, & text to speech.

+ +

Embed Pattern

+
<script src="https://uncloseai.com/uncloseai.js" type="module"></script>
+ +

Place before </body>. The script injects a floating button (bottom right) that opens a chat modal. Translation & TTS features appear as controls inside the modal.

+ +

Behavior

+ + + + + + + + + +
FeatureTriggerNotes
ChatClick floating buttonPage context passed automatically
TranslateGlobe icon in modal controlsRenders translated page inline via iframe
Text to SpeechSpeaker icon in modal controlsMultiple voices, adjustable speed
+ +

CSS Isolation

+

The widget loads its own stylesheet (uncloseai-modal-pico.css on PicoCSS sites, uncloseai-modal-builtin.css elsewhere). All selectors scope to dialog#uncloseai-embedded-modal, dialog#translate-modal, or dialog#tts-modal to avoid leaking into host page styles.

+ +

Software Page Card

+

On the software page, .project-uncloseai spans full grid width at desktop breakpoints.

+ +
+

← back to the manifesto