WordPress
Add AI Search to your WordPress site
What is WordPress
WordPress popular content management system (CMS) designed for creating and managing websites.
Get an API key
- Go to the Inkeep Dashboard
- Select your project under Projects
- Go to the Integrations tab
- Click on Create integration
- Select Web
- Provide a Name and URL (optional) for the integration
- Click on Create
- Click the Example < /> button to get your API key and view suggested settings
Install custom code plugin
This plugin is required to add custom code in order to create a widget.
- Open WordPress admin panel
- Select the Plugins tab
- Open the Add New Plugin section
- Install the Head & Footer Code plugin
Creating the container
Add a container for the widget. You can do this using the built-in WordPress functionality.
- Open the Appearance tab
- Select Editor mode
- Select the area to which you want to add the SearchBar widget
- Add a Custom HTML block
Example:
![](https://mintlify.s3-us-west-1.amazonaws.com/inkeep/images/wordpress/wordpress-search-bar-container.png)
Initialize the widget
Next, under Tools go to the Head & Footer Code subsection. Add the code below to the HEAD Code section:
<script
id="inkeep-script"
src="https://unpkg.com/@inkeep/uikit-js@0.3.5/dist/embed.js"
type="module"
defer
></script>
<script defer>
const inkeepScript = document.getElementById("inkeep-script");
// configure and initialize the widget
const addInkeepWidget = () => {
const inkeepWidget = Inkeep().embed({
componentType: "SearchBar",
targetElement: document.getElementById("inkeepSearchBar"),
properties: {
baseSettings: {
apiKey: "INKEEP_API_KEY", // required
integrationId: "INKEEP_INTEGRATION_ID", // required
organizationId: "INKEEP_ORGANIZATION_ID", // required
primaryBrandColor: "#26D6FF", // your brand color, widget color scheme is derived from this
organizationDisplayName: "Inkeep",
// ...optional settings
theme: {
stylesheetUrls: ['/path/to/stylesheets'], // optional
// ...optional settings
},
},
modalSettings: {
// optional settings
},
searchSettings: {
// optional settings
},
aiChatSettings: {
// optional settings
botAvatarSrcUrl: "https://mydomain.com/mylogo", // use your own bot avatar
quickQuestions: [
"Example question 1?",
"Example question 2?",
"Example question 3?",
],
},
},
});
};
inkeepScript.addEventListener("load", () => {
if (document.body) addInkeepWidget(); // initialize the widget
});
</script>
Save custom code
Click on the Save Changes. Navigate to your web application to make sure the widget is installed correctly.
For a full list of customizations, check out the Search Bar documentation.