Add Phoenix to your website
Give your visitors a calm, neuro-affirming place to turn. One line of code adds Phoenix herself to your site: an animated character floating in the corner of every page, with the chat open beside her. Her eyes follow the visitor’s pointer, she reacts to what they say, and visitors can drag her anywhere. It is free, there is nothing to sign up for, and it works on any website, including WordPress, Wix, Squarespace and Shopify.
1. Copy this line
Paste it just before the closing </body> tag on every page where you want Phoenix (or into your site’s “custom code” or “footer scripts” setting).
<script src="https://phoenix.neurohubcommunity.org/embed.js" async></script>
How she behaves
- Always there, and never in the way. Phoenix floats in the bottom-right corner, animated, on every page, and starts minimised with a friendly greeting. A click on him opens a rounded chat box beside him (full-screen on a phone).
- Visitors stay in control. Clicking her (or pressing Enter or Space when she is focused) minimises or reopens the chat, Escape minimises it, and she can be dragged anywhere. If a visitor minimises her, she stays minimised for the rest of their visit.
- She is alive. She leans in while someone types, nods, takes on the feeling of what they say (calm for worry, soft for sadness, sparkles for good news), moves her beak as she replies, and now and then stretches, preens or looks around. With reduced motion switched on she holds still poses instead.
2. Make it yours (optional)
Add any of these to the same line:
data-position="left": put her bottom-left (default is bottom-right)data-size="160": how big she is, in pixels (90 to 220, default 130)data-open="false"(the default: Phoenix starts minimised and a click opens the chat) or"true"(start with the chat open)data-greeting="Need a calm moment?": the bubble she shows while minimised (""for none)data-label="Chat with us",data-color="#0f766e",data-offset="30": the label read by screen readers, the chat’s header colour, and the distance from the edgedata-style="button": use a round button instead of the floating character
Example: <script src="https://phoenix.neurohubcommunity.org/embed.js" data-position="left" data-greeting="Need a calm moment?" async></script>
You can also open or close her from your own button with PhoenixWidget.open() and PhoenixWidget.close().
What visitors get
- Phoenix chat (typed, and spoken where the browser allows it), the daily check-in, the calming toolkit and the Help button with helplines for their country, the same as the app.
- It can be used with a keyboard and a screen reader, and works on phones.
- Their chats stay on their own device, inside Phoenix’s own frame. Your website never sees what visitors type or what Phoenix says: the only thing passed to the page is a few fixed words that animate her (such as “thinking” or “calm”).
Privacy and cost
- The widget sets no cookies. The only thing it stores is a note, for that visitor’s visit only, that they minimised Phoenix.
- NeuroHub Community counts, anonymously, that the widget loaded on your website’s address, how often the chat is opened, how many messages are sent, which features get used, and how many people click to donate, all as totals for your website, so we can see how it helps. We never see who your visitors are or what they write. Visitors who send Do Not Track are not counted.
- The AI replies are paid for by NeuroHub Community, and each visitor has a daily limit. If Phoenix is useful to your visitors, please consider a donation to keep it live.
- Phoenix is a computer program, not a therapist or a crisis service. Please say so on your site if you add her.
Questions: neurohubcommunity.org/contact-us. You can try her right now: the Phoenix in the corner of this page is the widget.