Skip to content

How to publish a chatbot to a Wordpress website

There’s a lot of things you didn’t know about. For example, did you know that a person’s blood vessels can circulate the Earth, more than once? Or that you can have a chatbot on your Wordpress site, just by adding a plugin in 2 minutes? We’ll concentrate on the second fact, since we’re dealing with chatbots. You understand us, right? So let’s connect your chatbot to your site.

On the right upper corner, click on the “Channels” tab, then choose “Wordpress”, which, in turn, will take you to the Wordpress site and out of the hub.

  • On your Wordpress dashboard, Go to your plugins tab. Search for the “CoCoHub” plugin
  • Install and activate the plugin
  • Under the plugin settings, set your bot’s dimensions, distance from the sides of the screen, the name, the first thing it will say to trigger a response from the user, and the component’s url - it can be found in cocohub’s studio, by clicking on the clipboard icon in the top navigation bar.
  • Also, add your email address, the bot’s language (ISO code for language - like en for English, es for Spanish, ar for Arabic)
  • If the bot’s language is RTL (right-to-left), check the relevant box
  • and set your bot component_url from cocohub.ai
  • Use the shortcode [cocobot] to add it to your page To get more in depth instructions follow the tutorial here: https://docs.cocohub.ai/tutorials/wp_cocobot

A pop-up will show, asking you to customize your chatbot.

By the way, before you ask yourself or look around in confusion, “Fab” is the pop-up window of your chatbot on the website.

  • Decide what will be the distance of your chatbot from the bottom and right sides of the screen in pixels. The default is 20 pixels. Take into account that different people have different screen resolutions.
  • Decide the height and width of your chatbot’s window, in pixels. The default is 500 pixels high and 300 pixels wide.
  • Give your chatbot a name - this is the name that will appear on the top of the chatbot’s window.
  • Then you’re asked to write “The first thing the bot says before user input” - this is self-explanatory, isn’t it? (Default is “Type anything to get started”)
  • Under Conversational language, don’t write the name of language, but it’s ISO code. An ISO (International Organization for Standardization - we know it’s supposed to be IOS, but go figure) code is a 2-letters abbreviation for a language, like en for English, es for Spanish, ar for Arabic, etc. If you don’t know your language’s ISO code, look it up here. \ There are some variations of the same language between different countries, such as en-gb (English-Great Britain) and en-us (English-United States).

  • Then, check the boxes if you want \

  • Your chat window to be permanently open (then, the user can’t minimize it!)

    • Your chatbot to be in a right-to-left direction (for example, in Arabic or Hebrew)

    • If you want the chat window to start open (then, the user must click on it to start speaking)

Congratulations! Your chatbot is ready to be embedded into your website. Now click the “copy embed code” and it will provide you with an embed code on your clipboard.

Paste it in your website HTML body, update your website, check that it’s working

Then, start partying around the office or your house with confetti! (This is mandatory. Ok, maybe not. But we highly recommend it)