Prerequisites

Before you begin, make sure you have:
A Rannah account with a configured AI agent
Admin access to your WordPress website

Integration Methods

There are three main ways to integrate your Rannah Agent widget into WordPress:

Plugin Method

Using the “Insert Headers and Footers” plugin

Theme Editor Method

Directly editing your theme’s header.php file

Elementor Method

Using Elementor’s Custom Code feature

Rannah Agent Widget Code

Before proceeding with any method, you’ll need your Rannah Agent widget code:
Remember to replace YOUR_AGENT_ID with your actual Rannah Agent ID.

Method 1: Using a Plugin

1

Install Plugin

  1. Open your WordPress dashboard
  2. Go to Plugins > Add New
  3. Search for Insert Headers and Footers
  4. Install and activate the plugin by WPBrigade
2

Access Plugin Settings

Go to Settings > WP Headers and Footers in the sidebar
3

Add Widget Code

Paste the Rannah Agent widget code in the header section
4

Save Changes

Click Save Changes

Method 2: Using the Theme Editor

Editing theme files directly can break your site if not done correctly. Always backup your site before making changes.
1

Access Theme Editor

  1. Open your WordPress dashboard
  2. Go to Appearance > Theme File Editor
2

Edit Header File

  1. In the Theme Files section on the right, find and open the header.php file
  2. Locate the closing </head> tag
3

Add Widget Code

Paste the Rannah widget code just before the closing </head> tag
4

Save Changes

Click Update File to save your changes

Method 3: Using Elementor

1

Access Elementor Custom Code

  1. Login to WP Admin
  2. Go to Elementor > Custom Code
2

Add New Custom Code

Click Add New Custom Code
3

Configure Custom Code

  1. Enter a title for your code snippet
  2. Choose the Location:
    • <head> for page level
    • <body> - Start for beginning of the page’s body
    • <body> - End for end of the page’s body
  3. Set the Priority (1-10, lower numbers have higher priority)
  4. Paste the Rannah widget code in the code block editor
4

Set Display Conditions

  1. In the Publish block, click Edit next to Conditions
  2. Set the desired conditions for where the widget should appear
5

Publish

Click Publish to make your changes live

Customization Options

You can customize your widget’s behavior and appearance by adjusting the RANNAH_CONFIG options:
Modify the render option to ‘bottom-left’ or ‘bottom-right’ to change the widget’s position.
Add autostart: true, to the RANNAH_CONFIG object to have the widget open automatically when a user visits your website.

Troubleshooting

If you encounter issues with your Rannah widget integration:
  1. Verify that you’ve copied the entire code snippet correctly.
  2. Double-check that you’ve replaced “YOUR_AGENT_ID” with your actual Rannah Agent ID.
  3. Clear your browser cache and refresh your WordPress website to see changes.
  4. If using a caching plugin, clear the cache after making changes.
  5. Check for conflicts with other plugins or theme customizations.
If you’re using a security plugin, make sure it’s not blocking the Rannah scripts from loading.