WordPress is meant to facilitate the life of anyone trying to manage a website, that means that it’s advisable to stick with Themes and not try to manually change all the html/css/php files that come with it.
So, how can we bring the ODA Web SDK into a WordPress site, without the risk of handling the Theme configuration files? I found a simple Plugin that allows us to easily incorporate both the web-sdk.js and the necessary scripts to configure an ODA chatbot 🙂
Prerequisite: You need to be familiar with both the ODA WebSDK and WordPress admin as well.
Install Plugin
I have this plugin, probably there are many other that would also work.
Add custom JS
Press the option “Add Custom JS” and paste the entire contents of the web-sdk.js file
Add custom HTML
There is no need to paste the entire configuration of the index.html. Only the <Script> part is required.
For everyone acquainted with the Web SDK, you will notice I cut some corners as I merged some of the settings.js contents into the index.html file. The SDK offers endless customization properties. Here I only added some basic ones, as a couple of icons, the chatbot titles, a theme and a hidden-message to trigger the Greeting Intent.
One important line is the last one of the above HTML (not visible in the screenshot)
<script src="<location of the custom js file created in the previous step>.js" onload="initSdk('Bots')"></script>Without the reference to the web-sdk.js file the Bot will not work
Both files need to be published – I have not change any default setting. In the free plugin version we cannot choose in which pages to execute the custom code, hence its always visible.
ODA on Tech Trantor
Now for a little bit of inception, a chatbot embedded on the site where I am writing a post about embedding chatbots on WP sites.
Bottom-right is the default location for the Icon. Quite small by default, but I will add a custom.css to change that.
When expanded we can see the WineBot (Created by Frank Nimphius and also available in the DA Store) making an introduction
Change Icon Size with Custom.css
The default icon size is too small to grab anyone’s attention. We can control that with some css elements.
Then in the index.html file add this entry on top
<link rel="stylesheet" href="location_of_custom.css">
Looks better now 🙂
Final Notes
This was just a small proof of concept, the bot will be online for some hours after which I will remove it 🙂
This just goes to prove how easy it is to bring the Web SDK to anywhere in the web!
PS: You cannot order any wine, this is just a mockup.