How to add Roof AI to your website

How to install script

Roof AI is installed on your website using a small JavaScript snippet (a single <script> tag). This script tag loads Roof AI on your website and looks similar to this:

<script defer src="https://cdn.roof.ai/webchat/cf9ca0d7-7737/widget.js"></script>

Simple overview

All you need to do is copy and paste your script tag into the header of your website and hit publish. This is an oversimplification, so we've provided three detailed explanations (Google Tag Manager, Wordpress, and broadly any CMS) of the installation process below, depending on how your website is setup and how you manage scripts. All of these methods follow the same principles:

1. Get your script tag
2. Find out where you need to install it
3. Copy and paste that script in
4. Hit publish

Step-by-step: Google Tag Manager (GTM)

Part 1: Creating the tag

1. Open tags: In Google Tag Manager, go to the left-hand menu and click on Tags.
2. Create new: Click the New button on the right side of the screen.
3. Select tag type: Open the tag configuration settings, scroll down, and select Custom HTML.
4. Insert script: Copy and paste your Roof AI script into the HTML text box.
5. Set triggering: Scroll down to the Triggering section and select All Pages. This ensures Roof AI appears in the bottom right corner of every page on your site.
6. Save: Give your script a name and press Save.

Part 2: Testing the installation

Before publishing to your live site, use the preview mode to ensure the script is loading correctly.

1. Enter preview mode: Click the Preview button in Google Tag Manager.
2. Connect website: Copy and paste your website URL into the field and press Connect.
3. Verify: Check the bottom right corner of your website. If the installation is successful, you'll see the Roof AI widget showing that it'sfunctional.

Part 3: Publishing to the live site

1. Submit changes: Return to Google Tag Manager and click Submit.
2. Name the version: Give your submission a name.
3. Publish: Hit Publish to make the script live on your website.
4. Final check: Go back to your live website and double-check to make sure the widget is still appearing and working correctly.

Common GTM issues

• Your script tag saved but container was not published. In this case, just double check in the preview mode, that the script tag exists and republish GTM.
• Trigger not set to All Pages. In this case, your script will only get rendered on the pages which it was triggered to render on. All you need to do is go back to triggering and select All Pages.

Step-by-step: WordPress

Part 1: Checking for existing script managers

Before installing new tools, check if your site already has a way to manage scripts.

1. Go to the Plugins tab on the left-hand menu.
2. Look for existing plugins that manage third-party scripts (often used for Google Ads or Meta Ads).
3. If you see a script management plugin, skip to the next part in the video where I show an example of how the script is installed.

Part 2: Installing the WPCode plugin

If you do not have an existing script manager, follow these steps to use WPCode, one of the most common plugins for this task:

1. Click Add plugin at the top left of the screen.
2. Search for WPCode.
3. Install and click Activate.
4. Once active, locate the WPCode menu on the left side and select Header and Footer.
5. Locate the Header section on the screen.
6. Copy and paste your script into this section.
7. Click Save changes.

Part 3: Using page builders (Elementor example)

If you use a page builder, the process is slightly different because these page builders typically contain script management functionalities:

1. Navigate to your page builder menu (ex. Elementor in our example) on the left.
2. Scroll down to Custom elements and then select Code.
3. Copy and paste the script tag into the header.
4. Hit Publish.

If you're using a different page builder, the principles are the same. Check to see where the page builder manages scripts. This will likely be called "custom code," "custom elements," "header and footer," etc. Then copy and paste the Roof AI script tag in.

Part 4: Verifying the installation

After saving your changes and completing your normal publishing process, do one final check to verify the script is active:

1. Visit your live website.
2. Look for the script's output (for example, a widget appearing in the bottom right of your screen).
3. Open and interact with it!

Step-by-step: CMS

1) Get your Roof AI install script (sent by email)

After onboarding, we’ll email you your unique Roof AI script snippet. Keep that email handy – you’ll copy and paste the snippet exactly as provided.

2) Find your site’s global header/template

Locate where your website defines the global <head>...</head> section (sometimes called “global header,” “site header,” or “master template”).

3) Paste the Roof AI script into <head>

Paste the script anywhere inside <head> and publish / deploy your changes.

4) Confirm the widget is showing on the right pages (based on your tier)

Regardless of which plan you sign up for, including the Free tier, Roof AI can appear on every page of your website.

5) Verify it’s live

• Hard refresh your site (Cmd/Ctrl + Shift + R)
• Confirm the widget appears where expected
• Optional: DevTools → Network → confirm widget.js loads successfully

Best practices

• Use existing locations: The best place to install a third-party script is wherever you already manage other scripts.
• Consult your team: If you work with a third-party web vendor or have a developer at your brokerage, share the script tag with them so they can install it in the preferred location.
• If your site uses a caching plugin, performance plugin, or CDN: clear the cache so you can view changes right away.
• If you try to get it installed, and it never works: reach out to us for help. We are happy to. Email us at support@roof.ai.

FAQ

Can we exclude specific pages?

Yes, you can exclude specific pages by URL pattern (ex. exclude certain realtor pages). Depending on how your site is set up, your web vendor may need to implement the exclusion rules.

Do subdomains work?

No, Roof AI doesn’t support running the AI assistant on subdomains.