Add Grouper Forms & Chat
to Any Website
One script tag. Three widgets. Country and phone dial code auto-detected from the visitor's location. All submissions flow directly to the Grouper team.
Quick Start
Paste a container div and load the script. That's it — the widget renders inside the div.
<!-- 1. Place a container div where you want the widget to appear -->
<div data-grouper-form="demo"></div>
<!-- 2. Load the script ONCE, just before </body> — one tag handles all widgets -->
<script src="https://bamboohr.grouper.ie/embed.js"></script>The script auto-initialises. No framework, no build step, no API key required. Add only one <script> tag per page, regardless of how many widgets you use.
Available Widgets
Capture demo leads. Collects name, work email, job title, company, phone (with auto-detected dial code), employee count, and country.
- First Name
- Last Name
- Work Email
- Job Title
- Company
- Phone + Dial Code
- Employee Count
- Country
General enquiry form. Same fields as demo but adds a free-text message box.
- First Name
- Last Name
- Work Email
- Company
- Phone + Dial Code
- Employee Count
- Country
- Message
Streaming AI chat widget backed by the Grouper BambooHR Assistant. Answers questions about BambooHR features, implementation, pricing, and support.
- Conversational — no form fields
Embed Snippets
Demo Request Form
<div data-grouper-form="demo"></div>
<script src="https://bamboohr.grouper.ie/embed.js"></script>Contact / Enquiry Form
<div data-grouper-form="contact"></div>
<script src="https://bamboohr.grouper.ie/embed.js"></script>AI Chat Widget
<div data-grouper-form="chat" data-height="540"></div>
<script src="https://bamboohr.grouper.ie/embed.js"></script>Multiple Widgets on One Page
<!-- Place as many widget divs as you need, anywhere in the body -->
<div data-grouper-form="demo"></div>
<!-- elsewhere on the page... -->
<div data-grouper-form="chat" data-height="500"></div>
<!-- ONE script tag at the end — it finds and mounts all widgets above -->
<script src="https://bamboohr.grouper.ie/embed.js"></script>Options
| Attribute | Values | Default | Description |
|---|---|---|---|
| data-grouper-form | demo · contact · chat | — | Which widget to render (required) |
| data-height | any number (px) | 640 / 720 / 540 | Iframe height in pixels |
| data-theme | light | light | Visual theme (light only for now) |
Unbranded Variants
The -plain variants strip all Grouper / BambooHR references — no partner badge, no promotional copy, no consent footer. Use these when embedding on a partner or client site where you don't want the Grouper brand visible.
<!-- Unbranded demo form -->
<div data-grouper-form="demo-plain"></div>
<!-- Unbranded contact form -->
<div data-grouper-form="contact-plain"></div>
<!-- Unbranded chat widget -->
<div data-grouper-form="chat-plain" data-height="500"></div>
<!-- ONE script tag — place it at the end of the page, after all widget divs -->
<script src="https://bamboohr.grouper.ie/embed.js"></script>Geolocation
When a visitor loads any form widget, their country is automatically detected via IP lookup and the Country field is pre-selected. The phone dial code (e.g. 🇮🇪 +353, 🇬🇧 +44, 🇺🇸 +1) updates to match. Visitors can change either field at any time. Results are cached per browser session so the lookup only runs once.
JavaScript API
The script exposes a small global API for programmatic control:
// Open a widget in a new tab (useful for link / button triggers)
GrouperWidget.open("demo");
GrouperWidget.open("contact");
GrouperWidget.open("chat");
// Re-scan for any new [data-grouper-form] divs added after page load
GrouperWidget.mount();Questions about the embed widgets or need a custom integration?
Talk to the Grouper Team →
