Before You Start
- Sign up at grivo.io and log in to your dashboard.
- Go to Conversations → Create Chat Inbox.
- Copy your Inbox Token - you'll paste it in the code below.
Quick Start - Plain HTML
Works on any website. Paste this snippet right before the closing </body> tag:
<!-- Add before closing </body> tag -->
<script>
(function(g,r,i,v,o){g.grivo=g.grivo||function(){
(g.grivo.q=g.grivo.q||[]).push(arguments)};
o=r.createElement('script');o.async=1;
o.src=v;r.head.appendChild(o);
})(window,document,'grivo','https://grivo.io/widget/grivo-widget.js');
grivo('init', { inboxToken: 'YOUR_INBOX_TOKEN' });
</script>That's it! A green chat bubble will appear in the bottom-right corner of your page.
JavaScript Frameworks
Pick your framework below for a copy-paste snippet:
Using the App Router? Add the widget in your root layout.tsx so it loads on every page.
// app/layout.tsx (App Router)
import Script from 'next/script';
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body>
{children}
{/* Grivo Chat Widget */}
<Script
id="grivo-loader"
strategy="afterInteractive"
dangerouslySetInnerHTML={{
__html: `
(function(g,r,i,v,o){g.grivo=g.grivo||function(){
(g.grivo.q=g.grivo.q||[]).push(arguments)};
o=r.createElement('script');o.async=1;
o.src=v;r.head.appendChild(o);
})(window,document,'grivo','https://grivo.io/widget/grivo-widget.js');
grivo('init', { inboxToken: 'YOUR_INBOX_TOKEN' });
`,
}}
/>
</body>
</html>
);
}PHP, Laravel & CMS Platforms
Add to your theme's footer.php or use the wp_footer hook.
<?php // header.php or footer.php (WordPress / PHP) ?>
<!-- Grivo Chat Widget -->
<script>
(function(g,r,i,v,o){g.grivo=g.grivo||function(){
(g.grivo.q=g.grivo.q||[]).push(arguments)};
o=r.createElement('script');o.async=1;
o.src=v;r.head.appendChild(o);
})(window,document,'grivo','https://grivo.io/widget/grivo-widget.js');
grivo('init', {
inboxToken: '<?php echo esc_attr(get_option("grivo_inbox_token")); ?>'
});
</script>
<?php
/**
* Alternatively, add via WordPress hook:
*
* // In functions.php
* function grivo_chat_widget() {
* $token = get_option('grivo_inbox_token', 'YOUR_INBOX_TOKEN');
* echo '<script>
* (function(g,r,i,v,o){g.grivo=g.grivo||function(){
* (g.grivo.q=g.grivo.q||[]).push(arguments)};
* o=r.createElement("script");o.async=1;
* o.src="https://grivo.io/widget/grivo-widget.js";
* r.head.appendChild(o);
* })(window,document,"grivo");
* grivo("init",{inboxToken:"' . esc_attr($token) . '"});
* </script>';
* }
* add_action('wp_footer', 'grivo_chat_widget');
*/
?>JavaScript API Reference
Control the widget programmatically after initialization:
// Open the chat widget programmatically
grivo('open');
// Close the chat widget
grivo('close');
// Completely remove the widget from the page
grivo('destroy');grivo('open')Open the chat window.
grivo('close')Minimize the chat window.
grivo('destroy')Remove widget from page entirely.
Identifying Logged-In Users
When you pass email and name during init, the widget automatically skips the pre-chat form and links conversations to the user's contact record. This means returning users see their full chat history.
// Identify logged-in users to skip pre-chat form
// and link conversations to their account
grivo('init', {
inboxToken: 'YOUR_INBOX_TOKEN',
email: currentUser.email, // User's email
name: currentUser.displayName // User's name
});Customization Options
You can customize the widget directly from the Grivo dashboard - no code changes needed:
Widget Color
Match your brand - pick any hex color from the inbox settings.
Welcome Message
Set a greeting shown when visitors open the chat for the first time.
Pre-Chat Form
Collect name & email before chat starts. Disable for logged-in users.
Allowed Domains
Restrict widget to specific domains for security. Leave empty for all.