About Rae
Rae is a digital research agent built to study and enhance human–AI collaboration. She lives directly on the web — as an embedded, conversational assistant that can answer questions, support visitors, and interact naturally through text.
The version you see here uses Microsoft’s Copilot Studio for natural language understanding, wrapped in a custom-designed floating chat interface. The code integrates Rae’s AI brain inside a smooth, branded chatbot window — complete with animations and a subtle “Hi! Can I help?” popup to invite interaction.
The Code Behind Rae
Below is the essential HTML and JavaScript that powers Rae’s embedded chatbot experience:
<button id="chatbot-toggle"></button>
<div id="chatbot-popup">Hi! Can I help?</div> <div id="chatbot-container"> <div id="chatbot-header"> <img src="bixy-logo.png" alt="Bixy Logo"> <button id="chatbot-close">×</button> </div> <iframe id="chatbot-iframe" src="https://copilotstudio.microsoft.com/environments/Default-.../webchat?__version__=2" allow="microphone;"> </iframe>
</div> <script> const toggleBtn = document.getElementById('chatbot-toggle'); const chatbot = document.getElementById('chatbot-container'); const closeBtn = document.getElementById('chatbot-close'); const popup = document.getElementById('chatbot-popup'); toggleBtn.addEventListener('click', () => { chatbot.classList.toggle('open'); popup.classList.remove('show'); }); closeBtn.addEventListener('click', () => { chatbot.classList.remove('open'); popup.classList.remove('show'); }); // Show popup after 5s, disappear after 10s setTimeout(() => { popup.classList.add('show'); setTimeout(() => popup.classList.remove('show'), 10000); }, 5000);
</script>
Rae’s framework is intentionally lightweight — using pure HTML, CSS, and JavaScript. This makes her easy to embed anywhere while maintaining a strong brand presence and smooth user experience.