How to create a skin for your chatbot?

First, download the default Messenger Skin here to start with something. A regular skin is composed of 4 files :

  • {skin-name}-footer.php.
  • {skin-name}-header.php.
  • {skin-name}.php
  • {skin-name}.css

In most case, you will just edit {skin-name}.php and {skin-name}.css because it’s enough. Once you have made your changes, rename all those files with the name of your skin (for instance “myskin-footer.php, myskin-header.php, myskin.php and myskin.css”), also rename the directory of your skin (using the same name, so use /myskin), and upload this directory to :

/your-wordpress-dir/wp-content/{your-theme}/wpchatbot-skins/

for instance :

/your-wordpress-dir/wp-content/{your-theme}/wpchatbot-skins/myskin/

And the plugin will automatically found your skin in the chatbot builder.

Dev tips

2 useful global variables are available helping you :

  • (bool) $wpcb_fromQuickaccess : true if the view is loaded using the quickaccess.
  • (bool) $wpcb_fromShortcode : true if the view is loaded using the shortcode.

Related Articles