Add Widget To Website

Follow

Remember you can use a custom domain name for your store.
This allows you to completely design YourStoreName.wazala.com and then
use a custom domain mapping have it appear on Shop.YourDomain.com for example.
This is not a widget experience, but an in website experience. Definitely better for SEO :)

Widget experiences:

  1. Use the Wazala designed red button and have Wazala pop over your site.
  2. Use your own button and have Wazala pop over your site.
  3. Use your own button and embed Wazala into a page within your website and make it seem like your own.

Get your code ready and know your options:

  1. First get your widget code ready. Go to BUILDER > WIDGETS > Select Web Overlay Widget  or Web Embedded Widget.
  2. In Overlay you have options to select such as:
    1. Fixed page width - This allows you to specify a fixed page width to your website. Optional.
    2. Language - Select the default language of the store.
    3. Location - This is regarding the store button. It can be left, right, middle or hidden. Hidden allows you to create your own button instead of using the Wazala (red button.
    4. Label - What do you want the red button to say? Choose from available of customize it. 
    5. Mobile - Floating is default, which will show mobile users a floating button to click on to go to the store. Minimized will drop it to the end of the page. 
  3. In Embed you have less options:
    1. Language - Select the default language of the store.
  4. In both you can select different colors to allow the widget to match the site you're adding it to.  

Adding the code to your website:

Next you need to find out where within your platform the code is placed. Most platforms require it to be within the head section right before the /head - This is the optimum Wazala place for the overlay, but some platforms require a different approach. If you're embedding then it can be in the content of your web page. Just find a good location for it to appear well and centered. 

Most common - Within the head section for overlay / popup store

You need to paste the code into any web page on your website that you want to have the store appear. Your need to past the code in the head section of your website preferably right before the end of the head section. Repeat this process for every page you want the store to appear on. 


<html ...>
<head>
<title>...</title>
.
.
.
<!-- Copy and Paste Wazala Script Here -->
</head>
<body>
.
.
.
.
.
</body>
</html>

WordPress

If you are using a self hosted version of WordPress then you can watch our video how to here.

 

Self Service Website Builders & Blogging Platforms

If you are using other blogging platforms or a website building platform like virb, viviti, jimdo, squarespace, webs, yola, weebly, doodlekit, groop and blogspot to name a few, They all have some way for you to inject your own script into the generated HTML of the website. This is where you would need to copy and paste the code. Most common instruction provided by the website builder software would be for how to inject the Google Analytics code into your website. What you need to do is follow the same instructions but insert the Wazala code instead. Feel free to email us at [email protected] for specific platform instructions. 

 

Content Management Systems (CMS) 

Content management systems can be hosted or running on your own servers. Content management systems are very flexible in regard to modifying the HTML of the website. If you are using a content management system (CMS) you need to paste the Wazala code in the head template of your website, if you have a system administrator responsible for this task just point them to this help section for instructions. The basic idea is the same as all sections above. You need to copy the Wazala script and paste it into the head section of the CMS template of your website for overlay or anywhere you wish it to appear as embed.

 

Still need help?


Some platforms limit the use of javascript and may not allow Wazala to be placed. We try to continuously find solutions for these. You can check here or simply email [email protected] with the platform you use and we will guide you.

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request