Overview
The Element451 Plugin for WordPress simplifies the process of adding Bolt Discovery (AI-powered search) and Messenger (Live Chat) to your WordPress site. It reduces technical complexity, speeds up implementation, and helps you engage visitors more effectively. Follow this guide to get started!
Key Features
Quick Setup + Configuration
The plugin automatically embeds the Element451 shell script into your WordPress theme, eliminating the need for code changes.
Bolt Discovery Integration
Easily insert Bolt Discovery, Element451’s AI-powered search tool connected to your curated knowledge base, directly into your site pages with just a few clicks—no coding required.
Additional customization options are available for advanced users, allowing you to adjust placement and styling to better align with your site’s design.
Messenger (Live Chat) Integration
Deploy the Messenger (Live Chat) widget across your site, giving students and visitors access to AI-powered Bolt AI Assistants for around-the-clock support, as well as your human staff for personalized help.
Step-by-Step Installation and Setup
Step 1: Install the Plugin
Log in to your WordPress admin dashboard.
Go to Plugins > Add New.
Search for Element451 Integration (or visit our plugin page here).
Click Install Now.
Step 2: Add Your Subdomain in Plugin Settings
Once the plugin is installed, a new menu item called Element451 will appear in your WordPress admin navigation (usually near the bottom).
Click on Element451 to open the plugin settings.
Under Main Integration Settings, enter your Element451 subdomain. Example: If your Element451 URL is
abcd.element451.io, your subdomain isabcd.Click Save Settings.
Step 3: Activate the Plugin
After saving your subdomain, go back to the Plugins page in WordPress.
Locate the Element451 Integration Plugin and click Activate.
What Happens After Activation
Messenger: Once the plugin is activated, the Messenger widget will automatically appear on all pages of your WordPress site. To control where Messenger is displayed, you’ll need to adjust the settings in Element451:
Navigate to Engagement > Conversations > Settings > Messenger > Conditions.
Use page, path, or UTM parameter conditions to specify which pages Messenger should appear on.
These conditions only control the visibility of the Messenger widget on your external website pages. They do not affect Element451-hosted pages or sites. For Element451-hosted pages, Messenger visibility is managed at the module level. Learn more here.
Bolt Discovery: The Bolt Discovery block must be manually added to your site’s templates or individual pages. This is covered in the next section below.
Adding Bolt Discovery to Your Site
Methods
There are now three ways to add the Bolt Discovery search tool to your WordPress site: Block, Shortcode, or PHP Function.
Block
Blocks are part of WordPress’s modern block editor (Gutenberg). They offer a visual, drag-and-drop interface, making it easy for users to add and position elements without coding.
Use a block when editing a specific page or post, especially if you prefer a visual approach.
Shortcode
These are snippets of text (e.g.,
[element451_bolt_discovery]) that you paste into the WordPress editor.Use a shortcode if you’re working outside the block editor, such as in widgets, older classic editor pages, or templates. Shortcodes provide flexibility for embedding Bolt Discovery in areas beyond the block editor.
PHP Function
The
<?php element451_bolt_discovery(); ?>function lets you add Bolt Discovery directly to your WordPress theme’s PHP templates.This method is for developers or webmasters who are comfortable working with PHP. It’s ideal for placing Bolt Discovery in areas managed by templates, such as headers, footers, or other global elements. With this approach, you can control the structure and style of Bolt Discovery more precisely.
Locations
Pages: Adding Bolt Discovery to a page makes it visible only on that specific page. This is best when you need the tool in a limited number of places, such as on a specific landing page.
Templates: Adding Bolt Discovery to a template ensures it appears consistently across your site (e.g., in the header, footer, or sidebar). For global placement, use either the PHP function or embed the shortcode in your template.
Instructions
As mentioned above, there are three methods for adding Bolt Discovery to your site. Below, you’ll find a comparison table to help you choose the best method for your needs, followed by detailed instructions for each option.
Method | Ease of Use | Customization | Best For |
Block | Beginner-friendly, no coding needed | Limited to CSS changes | Editing pages in the block/visual editor |
Shortcode | Flexible, no coding needed | Limited to CSS changes | Widgets or classic editor |
PHP Function | Requires PHP knowledge | Full control over structure, layout, and styling | Global placement via templates |
Option 1: Block Editor
Option 1: Block Editor
Open the page where you’d like to add Bolt Discovery.
Type
/to launch the WordPress block menu.Search for Bolt Discovery and select it.
The block will be added to your page. From here, you can adjust it's position.
You can customize the appearance of Bolt Discovery to align with your institution’s branding. While the button text and placeholder text can’t be changed, you can tweak styling elements like colors, fonts, and padding using additional CSS. If you’re unfamiliar with CSS, your webmaster or web developer can assist. For even more customization control, consider using the PHP function.
For example. in the screenshot below, we adjusted the “ask” button to orange and rounded the corners.
Option 2: Shortcode
Option 2: Shortcode
Insert the shortcode
element451_bolt_discoveryinto your content for page-specific placement or into a widget for broader use.Alternatively, embed the shortcode into a PHP template for global placement (e.g., in a sidebar or footer).
Option 3: PHP Function
Option 3: PHP Function
This method is for developers or webmasters familiar with PHP.
Open your WordPress theme’s template files:
Navigate to Appearance > Theme File Editor or access the files via FTP.
Identify the template file where you’d like Bolt Discovery to appear (e.g., header.php for the header or footer.php for the footer).
Add the following PHP code where you want the search field to appear:
<?php element451_bolt_discovery(); ?>Save the file and refresh your site to see Bolt Discovery in the designated location.
When to Use:
Use this method when you need Bolt Discovery to appear in template-driven areas of your site, such as headers, footers, or other global sections.
This method is for developers or webmasters familiar with PHP, as it provides precise control over placement and integration.
Customization:
With the PHP function, you have the flexibility to:
Wrap the search field in custom HTML for better styling and layout control.
Apply additional CSS for styling adjustments like colors, fonts, and spacing.
Add custom JavaScript for enhanced functionality (e.g., animations or event handling).
Important Note Regarding Thread Starters
The Bolt Discovery WordPress plugin is not compatible with the Bolt Discovery thread starters feature. However, you can manually code thread starters into your site if you want to use them.
If you’re comfortable with code, we recommend using the PHP function method. This allows you to manually add the Bolt Discovery field to your site’s templates and pair it with custom-coded thread starters.
Thread starters can be implemented using basic HTML (for the buttons), CSS (for styling), and JavaScript (to pass the query to Bolt Discovery).