Skip to main content

Website Texting | How to install the website widget

This guide provides step-by-step instructions for adding the Rosie Website Texting Widget to your website.

Updated this week

To learn more about Website Texting Functionality here: https://heyrosie.com/support/en/articles/13369509-website-text-messaging-currently-in-closed-beta

Get Your Installation Code

Your personalized installation code is available in the Rosie admin with your business ID already filled in: Settings → Website Texting

The installation code looks like this:

<script src="https://widget.heyrosie.com/widget.js"   data-rosie-business-id="YOUR_BUSINESS_ID"></script>

Simply copy the code snippet from the admin (it has your business ID pre-filled) and follow the instructions below for your specific platform.

Quick Reference

WordPress

There are three recommended methods to add the Rosie Widget to your WordPress site.

Option 1: Rosie's WordPress Plugin (Recommended)

Rosie-built plugin for WordPress. See full installation details here:

https://heyrosie.com/support/en/articles/13776433-wordpress-plugin-rosie-website-texting-widget

Option 2: Code Snippets Plugin

The Code Snippets plugin provides a safe and easy way to add custom code without editing theme files.

  1. Install the Code Snippets plugin from the WordPress Plugin Directory

  2. Go to Snippets → Add New in your WordPress admin

  3. Give your snippet a name (e.g., "Rosie Widget")

  4. Add the following code, replacing the <script>...</script> with your installation code from the Rosie admin:

function add_rosie_widget() {     ?>     <!-- Paste your installation code here -->     <?php } add_action('wp_footer', 'add_rosie_widget');

  1. Set the snippet to run on the Front-end only

  2. Click Save Changes and Activate

Option 3: functions.php

If you prefer not to use a plugin, you can add the code directly to your theme's functions.php file.

  1. Go to Appearance → Theme File Editor

  2. Select functions.php from the file list

  3. Add the following code at the end, replacing the comment with your installation code from the Rosie admin:

function add_rosie_widget() {     ?>     <!-- Paste your installation code here -->     <?php } add_action('wp_footer', 'add_rosie_widget');

4. Click Update File

Note: If you're using a child theme (recommended), add the code to your child theme's functions.php to prevent losing changes during theme updates.

Drupal

Add the Rosie Widget to your Drupal site using a Custom Block.

  1. Go to Structure → Block Layout in your Drupal admin

  2. Click Place block in the desired region (recommended: Footer)

  3. Click Add custom block

  4. Give the block a description (e.g., "Rosie Widget")

  5. In the Body field, switch to Full HTML or Plain text format

  6. Paste your installation code from the Rosie admin

  7. Configure visibility settings as needed

  8. Click Save block

Note: You may need to clear Drupal's cache after adding the block for changes to take effect.

Reference: Drupal.org: Working with Blocks

Magento (Adobe Commerce)

Add the Rosie Widget to your Magento/Adobe Commerce store using a CMS Block.

Step 1: Create the CMS Block

  1. Go to Content → Blocks in your Magento admin

  2. Click Add New Block

  3. Fill in the block details:

    • Block Title: Rosie Widget

    • Identifier: rosie_widget

    • Store View: All Store Views (or select specific stores)

  4. In the Content field, paste your installation code from the Rosie admin

  5. Click Save Block

Step 2: Add Block to Template

Add the following code to your theme's footer template (e.g., footer.phtml):

<?php echo $this->getLayout()->createBlock('Magento\Cms\Block\Block')->setBlockId('rosie_widget')->toHtml(); ?>

Alternatively, you can add the block using Layout XML:

<referenceContainer name="before.body.end">     <block class="Magento\Cms\Block\Block" name="rosie.widget">         <arguments>             <argument name="block_id" xsi:type="string">rosie_widget</argument>         </arguments>     </block> </referenceContainer>

Reference: Adobe Commerce DevDocs: Create a New Block

Wix

Add the Rosie Widget to your Wix site using the Custom Code feature.

  1. Go to your Wix Dashboard

  2. Navigate to Settings (gear icon)

  3. Scroll down to the Advanced section

  4. Click Custom Code

  5. Click + Add Custom Code at the top right

  6. Paste your installation code from the Rosie admin

  7. Configure the following settings:

    • Name: Rosie Widget

    • Add Code to Pages: All pages

    • Place Code in: Body - end

  8. Click Apply

Important: Your site must be published and have a connected domain for custom code to work.

Reference: Wix Help: Embedding Custom Code to Your Site

Squarespace

Add the Rosie Widget to your Squarespace site using Code Injection.

  1. In your Squarespace dashboard, go to Settings

  2. Click Advanced

  3. Click Code Injection

  4. In the Footer field, paste your installation code from the Rosie admin

  5. Click Save

Note: Code Injection is available on Squarespace Core, Plus, Advanced, Business, and Commerce plans.

Adding to Specific Pages Only

If you only want the widget on specific pages:

  1. Go to Pages and hover over the desired page

  2. Click the gear icon to open page settings

  3. Click Advanced

  4. Add the code in the Page Header Code Injection field

  5. Click Save

Reference: Squarespace Help: Using Code Injection

Joomla

Add the Rosie Widget to your Joomla site using a Custom HTML Module.

  1. In your Joomla admin, go to Extensions → Modules

  2. Click New to create a new module

  3. Select Custom (or "Custom HTML" in older versions)

  4. Configure the module:

    • Title: Rosie Widget

    • Show Title: Hide

    • Position: Select a footer position (e.g., footer, debug)

  5. In the Custom Output or Content field, paste your installation code from the Rosie admin

  6. Set Status to Published

  7. In the Menu Assignment tab, select which pages should display the widget

  8. Click Save & Close

Alternative: Template Override

For more control, you can add the code directly to your template:

  1. Go to System → Site Templates

  2. Click on your active template

  3. Edit index.php and add the script before the closing </body> tag

Reference: Joomla Docs: Custom HTML Module

GoDaddy Website Builder

Add the Rosie Widget to your GoDaddy Websites + Marketing site.

Option 1: HTML Section (For Specific Pages)

  1. Go to your GoDaddy Product Page

  2. Find Websites + Marketing and click Manage

  3. Navigate to the page where you want to add the widget

  4. Click Add Section

  5. Search for and select HTML

  6. In the Custom Code field, paste your installation code from the Rosie admin

  7. Click Done

  8. Preview your changes, then Publish your site

Option 2: Head HTML (For All Pages)

For site-wide installation:

  1. In your website editor, go to Settings

  2. Look for Head HTML or Site-wide Code

  3. Paste your installation code from the Rosie admin

  4. Save and publish your site

Note: Embedding code can affect how your entire site functions. Test thoroughly after adding.

Reference: GoDaddy Help: Add HTML or Custom Code to My Site

JavaScript Frameworks

React

Add the widget by dynamically loading the script in a useEffect hook. This ensures the script loads only on the client side and cleans up properly.

import { useEffect } from 'react';  function RosieWidget({ businessId }) {   useEffect(() => {     // Check if script already exists     if (document.querySelector('script[src="https://widget.heyrosie.com/widget.js"]')) {       return;     }      const script = document.createElement('script');     script.src = 'https://widget.heyrosie.com/widget.js';     script.setAttribute('data-rosie-business-id', businessId);     script.async = true;     document.body.appendChild(script);      return () => {       // Cleanup on unmount       script.remove();       const widget = document.querySelector('rosie-widget');       if (widget) widget.remove();     };   }, [businessId]);    return null; }  // Usage in your App function App() {   return (     <div>       {/* Your app content */}       <RosieWidget businessId="YOUR_BUSINESS_ID" />     </div>   ); }

Next.js

For Next.js, you can use the built-in Script component for optimal loading:

import Script from 'next/script';  export default function RootLayout({ children }) {   return (     <html>       <body>         {children}         <Script           src="https://widget.heyrosie.com/widget.js"           data-rosie-business-id="YOUR_BUSINESS_ID"           strategy="lazyOnload"         />       </body>     </html>   ); }

Vue

In Vue 3, use the onMounted lifecycle hook to load the script:

<script setup> import { onMounted, onUnmounted } from 'vue';  const props = defineProps({   businessId: {     type: String,     required: true   } });  let script = null;  onMounted(() => {   // Check if script already exists   if (document.querySelector('script[src="https://widget.heyrosie.com/widget.js"]')) {     return;   }    script = document.createElement('script');   script.src = 'https://widget.heyrosie.com/widget.js';   script.setAttribute('data-rosie-business-id', props.businessId);   script.async = true;   document.body.appendChild(script); });  onUnmounted(() => {   if (script) {     script.remove();   }   const widget = document.querySelector('rosie-widget');   if (widget) widget.remove(); }); </script>  <template>   <!-- Component renders nothing --> </template>

Usage:

<template>   <div>     <!-- Your app content -->     <RosieWidget business-id="YOUR_BUSINESS_ID" />   </div> </template>

Angular

In Angular, use the AfterViewInit lifecycle hook and Renderer2 for proper DOM manipulation:

import { Component, AfterViewInit, OnDestroy, Renderer2, Input } from '@angular/core';  @Component({   selector: 'app-rosie-widget',   template: '',   standalone: true }) export class RosieWidgetComponent implements AfterViewInit, OnDestroy {   @Input() businessId!: string;      private script: HTMLScriptElement | null = null;    constructor(private renderer: Renderer2) {}    ngAfterViewInit(): void {     // Check if script already exists     if (document.querySelector('script[src="https://widget.heyrosie.com/widget.js"]')) {       return;     }      this.script = this.renderer.createElement('script');     this.script.src = 'https://widget.heyrosie.com/widget.js';     this.script.setAttribute('data-rosie-business-id', this.businessId);     this.script.async = true;     this.renderer.appendChild(document.body, this.script);   }    ngOnDestroy(): void {     if (this.script) {       this.renderer.removeChild(document.body, this.script);     }     const widget = document.querySelector('rosie-widget');     if (widget) {       this.renderer.removeChild(document.body, widget);     }   } }

Usage in your template:

<app-rosie-widget [businessId]="'YOUR_BUSINESS_ID'"></app-rosie-widget>

Troubleshooting

Widget Not Appearing

  1. Use your personalized code: Make sure you're using the installation code from your Rosie admin panel with your business ID already filled in

  2. Ensure the URL of your website is added to the allowed domains list in the Rose Admin.

  3. Clear cache: Clear your browser cache and any site caching plugins

  4. Check console: Open browser developer tools (F12) and check the Console tab for errors

  5. Verify script placement: Ensure the script is placed before the closing </body> tag

Widget Conflicts

If you experience conflicts with other scripts:

  1. Try moving the Rosie Widget script to load last

  2. Ensure no other elements have the rosie-widget tag name

  3. Check for JavaScript errors from other scripts that might block execution

Need Help?

If you continue to experience issues, contact Rosie Support with:

  • Your website URL

  • User email associated with your Rosie account

  • Screenshots of any error messages

  • The CMS platform you're using

support@heyrosie.com

Did this answer your question?