Compatibility:

WebSite X5 Evo and Pro

OpenWidget is a platform providing a widget that can be integrated on websites to improve the user experience and optimize the customer support.  Setting up widgets is very easy, and they are completely free of charge. Now, thanks to the OpenWidget Optional Object, integrating them on your WebSite X5 projects is even easier. 



In this guide, we will cover the following topics:

  1. What are widgets
  2. What you can use the widgets included in OpenWidget for
  3. How to create a widget with OpenWidget
  4. How to add a widget on your website
  5. How to update a widget you crated


What are widgets

Widgets (which stands for "window" + "gadget") are small components of a program's graphical user interface that can be interacted with easily and immediately.


In other words, widgets are like mini-applications that, generally speaking, tend to be: small and compact (they don't take up too much space on the screen), visually engaging, interactive and sometimes even customizable. There are different kinds of widgets: informational (e.g. weather forecasts, news or time), control (e.g. for music playback and volume adjustment), social (displaying social media feeds such as for Facebook, Twitter or Instagram) or gaming (e,.g. small games or fun activities).


What you can use the widgets included in OpenWidget for

With OpenWidget you can set up the widget to be included on your website pages so to activate the functions you need to connect with your customers, offer them the needed technical support and boost the sales on your online shop. 


Among the available widgets, OpenWidget offers:

  • WhatsApp Chat: give visitors the opportunity to chat via WhatsApp to get information and solve concerns.
  • Contact form: the easiest way to allow visitors to send you messages from your website.
  • FAQ: create a FAQ section so that visitors can easily find the answers to popular questions.
  • Product Sheets: use it to promote your products and services with engaging product sheets.
  • Instagram Feed: display your Instagram feed on your website to boost your customers' engagement.


How to create a widget with OpenWidget   

OpenWidget is a service you need to register to, but you can use it for free and with no limits:

  • Go to https://openwidget.com/ and click on Get started free.
  • Follow the procedure and report the required details: confirm your e-mail, and you're ready to start.
  • Now that you're logged in, you can start setting up your widget.
  • As you can see, the left side of the screen reports a bar with three tools: Widget Content, Customize Look and Add to website. Stay in Widget Content and use the side panel to choose the functions you want to activate. On the side, you can see a preview of the widget. 
  • Once you are done setting up the widget, click on Customize Look so to customize some aspects of it: the logo, the language, the welcome message, the colors, etc.
  • Now that your widget is ready, click on Add to website. Click on the Copy Code button so to copy the code you will need to add the widget to your website pages.      

How to add a widget on your website

In WebSite X5, you can use the Optional Object OpenWidget to integrate the widget you just created, You can add it:

  • on a specific page: in this case, the widget will be displayed on the selected page only, for instance the Home Page. 
  • on the template header or Footer: in this way, the widget will be displayed on all your website pages.


That's what you need to do:

  • If you want to add the widget on a specific page, choose the page in question on Step 3 - Sitemap and open it: add the OpenWidget Object in a cell of the layout grid. 
  • If, on the other hand, you want the widget to be displayed on all your website pages, go to Step 2 > Template Content, access either the Header or the Footer section and add the OpenWidget there. 
#tip - It doesn't matter what cell of the layout grid you add or the position of the Header/Footer you add the Object in: the widget will be displayed on top of the page.
  • In any case, after having added it, double-click on the OpenWidget Object to access the settings window and paste the code you previously copied.
  • Save and click on Preview to verify that the widget works properly and is visible on your website. 


Alternatively, you can integrate the OpenWidget code even without the Optional Object:

  • add the code in Page Property > Expert to activate the widget on a specific page
  • add the code in Website Settings > Statistics and Code > Code to activate the widget on all website pages. 
#tip - In both cases, you need to paste the code before closing of the </body> tag.


How to update a widget you created

If you want to add new functions or edit the style of a widget you already created, you can update it at any time. Access your OpenWidget account and apply the changes you want. 


You won't have to do anything on WebSite X5. The widget will stay up-to-date according to the defined settings. 



Are you curious to use this Object on your website pages? Install OpenWidget now: it's free.