Web widgets. Web widgets

Today, another service with widgets for the site is under the microscope. Why another one? – There are even too many of them, there are about 50 callbacks alone. But we don't look at everything. If the test subject ended up in this blog, then there is something interesting in it.

So, today is a service with MoClients widgets. At the time of writing, there are 6 highly customizable tools inside. These guys are positioned as free widgets for the site, but this is only partly true. You can receive only 10 applications per month from the widget for free. However, this is enough for testing. +B At the end you will find a promotional code for an additional amount for tests.

Video review of MoClients widgets:

List of widgets

On the main page of the site, on the right side, we immediately see a block of widgets (you can play around and click on its various parts). The second screen describes each of them in detail.

• Online calculator. This widget is given special attention in the article. Next we will look at an editing example and use cases.
  A regular calculator, when you enter some numbers (for example, when calculating a loan) and as a result a dry figure is given. It may seem too big and the client will leave. If you are interested in such calculators, you can see an overview of all services here. MoClients has a different model. You fill out the calculator form step by step, and at the end you are asked to enter an email or phone number through which the manager will contact you. This is a contact-wall: you spent time filling out the parameters and want to get the result. The conversion rate for completed forms from the calculator is much higher than from other standard application forms. The manager contacts the client, supplements the price with valuables, and processes objections. As a result, the cost figures take on a different, full meaning.
• Order form. A simple form that collects people's contact information and sends it to you.
• Link to the desired page. In this widget you can put a link to an important page.
• Promotion pop-up window. When you leave the site or after a certain time has passed (the parameters are configured in the admin panel), a window pops up, you enter your email and receive a discount.
• Catalog of product photographs. Widget for posting a portfolio, product catalog, etc. with the opportunity to leave a request.
• Subscribe to the newsletter. A standard widget that allows you to collect an E-mail database for further mailings.

Example of how the calculator works

The real juice is the calculator. Let's see how it works using the example of this site:

On the right you will see a block with two items:

MoClients admin panel:

On the main page of the admin panel we immediately see an example of a list of widgets for the site. By default, all widgets are enabled.

This is where a new widget is created.

Adding a widget

After clicking the “Add Widget” button, we are taken to a page for selecting the type of widget we want to install. While we were writing the article, we added a seventh widget from VKontakte.

Even the description says that this widget is only imitates calculator. And this can be much more effective than complex real online calculations.

Setup is very simple. You need to write the title of the widget, select an icon, the text of the question to which you can add a picture, and the text of the request for contact information.

There is a graphical tooltip at the end showing how the completed data will be displayed.

We save the settings, and now a calculator will be added to the sidebar of the connected site.

Installing MoClients on the site

In order for all added widgets to appear and work on the site, you need to install the code. This can be done at the very bottom of the “Widgets” menu tab or in the “Installation on site” tab. There are three installation options:

• Order free installation
• Send instructions by email
• Install by yourself

Installing it yourself with one line of code is very simple. Just add it before the closing body tag on all pages of your site.

In the site settings, you can add an e-mail for notifications, a phone number for SMS, etc. You will be prompted to add a site when registering for the service.

More examples

In the admin panel you can see an example of using widgets by clicking on the sidebar on the right. As a calculator, here's how to calculate the cost of a mortgage in four steps. You can select several answer options. After filling out, you are prompted to enter a phone number to receive the calculation results.

Contact form in the form of an “Ask us a question” widget.

There is a basic free version, but we do not take it into account, it has a limit of 10 applications per month. You can test for the first two weeks and at the full tariff, while receiving unlimited notifications about new applications both by e-mail and via SMS messages, and does not care about restrictions on the number of applications.

Promo code Moclients

When you register using this promotional code, you will have 800 rubles in your account for tests. Valid until November 13th!

My review of Moclients

The calculator is a very cool thing, I have installed it on several of my sites. Another situation where you absolutely need this service is a terrible old website. If this is what you have, then install a full set of widgets, with a portfolio, application form, and so on. This set is an almost complete separate website that will attract the attention of visitors and convert them into applications.

May 21 , 2016

Every time I connect a ready-made solution from services like disqus or Google analytics to my websites, I am amazed at the ease of integration of quite complex functionality. I put 3 lines of javascript code into the code - and you already have a block with comments. 2 more lines - and analytics from Google or Yandex are available. Of course, no magic happens; those same 3 lines of code pull all the necessary code from the remote server, and essentially deploy a small web application on the pages of your site. But how does it work inside and how can you do it yourself? It was quite interesting to figure this out, and in the end I got a small widget that works exactly according to this simple embedding scheme and at the same time does some useful things. Further details.

Why do we need widgets?

Iframes are well suited for this purpose. These are actually separate html pages that are embedded into other pages without having access to their “parent”. That is, we can embed our web application into an iframe, which will quietly do its job without interfering with the main site. And what exactly your widget will do, build a comment system on the page, show a cool toy or draw an interactive advertising banner - is entirely a matter of your taste and imagination.

In this article, we won’t focus on the toy, but will look at how to create an embedded widget for determining the weather. Of course, there are many different weather services for this, but we are not interested in using a ready-made solution. I would like to create a simple widget with my own hands in order to understand how it generally works and in the future apply the knowledge for some useful things. At the same time, we’ll refresh our knowledge of native javascript and php along the way.

What do we do?

We will create a widget that draws a shape with the weather forecast for tomorrow. Let's take only the temperature as an example, but as you will see further, it will be easy to add other data. The widget will contain information about the temperature for tomorrow, a drop-down list with the ability to select a city. The Update button will send a request to the server, which in turn contacts a third-party service to determine the weather and returns the necessary information to us. We process this data and return it to the client’s browser. Where the client part of the widget intercepts information and displays it to the user.

Here we see some page where it is said that we supposedly know how to determine the weather. And we show our visitors a form so that they can be convinced that the weather can really be found out right here.

I didn't have fun with the layout of the form, that's not the purpose of the article. In the real world, of course, we would create a cute shape that would attract attention.

So let's go back. People check the weather, perhaps without even realizing that they are actually using another service. But everyone is satisfied and happy, you get visitors to your site, clients - the necessary information.

A little clarification is needed here: the point of widgets is to provide unique, convenient, interesting functionality. We are not giving any special information in our example. You can check the weather anywhere. But for educational purposes, since we don’t know how to do anything ourselves yet, we’ll take weather data from the Weather Forecast in Russia and the CIS service. They kindly provide a free API, which we will use.

By technology

Nothing complicated either. I already let it slip about iframe. We will write javascript code in vanillaJS, without a single additional library. Even without jQuery for DOM manipulation. Our goal is also to ensure that the resulting widget is as lightweight as possible, and there is no point in dragging a bag of additional libraries into the user’s browser to make our work easier. Therefore, let's remember how to work with the DOM and send ajax requests in native javascript, and our clients will thank us. The server part is a couple of dozen lines of code in PHP.

We write code. Creating a basic page

The page on which our future widget will be located. Let's write a couple of lines of text there about how great we are in terms of our ability to predict the weather for tomorrow. This will be the index.html file - a regular html page. In the head section we will write this:

Webdevkin. Demonstration of the Weather widget

In the body section like this:

What's interesting here? We will store styles for the page (not for the widget!) in the css/style.css file. And in the right place we create an iframe..html. We remove its border and the ability to scroll and set the widget’s dimensions manually. Of course, it’s more interesting to create an adaptive one, but we’ll get to that later.

Styles for the page, without any special frills:

Body ( font-family: Arial; font-size: 14px; ) .wrapper ( width: 960px; margin: 0 auto; ) .weather-widget-container ( margin: 30px 0; )

Blank for widget

The widget is a regular html document. What is the difference? First, we won’t bother with unnecessary meta tags, because search engines don’t need our widget. And secondly, we will write both styles and js code directly in the code of the html page. We need this to make the widget load as quickly as possible, and reducing the number of requests to the web server will help us with this. We will upload everything you need in one file.

In the head section we will have the following code:

In the body section:

Let's look at these blocks in more detail.

Widget markup

Temperature for tomorrow °C

Here is the usual form. On top there is a small panel where we will display the temperature. Next select with the choice of city. The value values ​​for cities are taken from the meteoservice.ru service, I’ll tell you where exactly later, in the section where we will directly receive weather data. And at the end there is an Update button. We will have the layout done in classes; ID numbers will be assigned to those elements that need access from javascript code. The prefix wbd- (from webdevkin) is used for convenience, so as not to confuse the markup of the widget and the main page.

Widget styles

html, body, body * ( margin: 0; padding: 0; ) .wbd-widget, .wbd-widget * ( box-sizing: border-box; font-family: Ubuntu; ) .wbd-widget ( border: solid 1px #333; padding: 20px; color: black; ) .wbd-widget__info ( color: steelblue; font-size: 16px; text-align: center; ) .wbd-widget__form-label ( display: block; line-height: 30px; )

The styles for the widget are as simple as possible - you can write them to suit yourself, however you like. Don’t forget that we put the styles directly in the widget’s html file in the head - style section.

widget javascript code.

Let's write a class that will have methods for initialization, event binding, and receiving data from the server. Don’t forget that we will write the code in native js, since we don’t want to burden users with an unnecessary load of libraries.

Var WeatherWidget = (function() ( // To perform ajax requests var XHR = ("onload" in new XMLHttpRequest()) ? XMLHttpRequest: XDomainRequest; // Widget constructor function Widget() ( this..php"; this. ui = ( updateBtn: null, citySelect: null, temperatureSpan: null ); this.init(); ) // Update weather data Widget.prototype._updateData = function(e) ( // Send an ajax request to the server ) / / Initializing ui components Widget.prototype._initUI = function() ( this.ui.updateBtn = document.getElementById("wbd-widget-update"); this.ui.citySelect = document.getElementById("wbd-widget-city" ); this.ui.temperatureSpan = document.getElementById("wbd-widget-temperature"); ) // Event binding Widget.prototype._bindHandlers = function() ( this.ui.updateBtn.addEventListener("click", Widget. prototype._updateData.bind(this)); ) // Initialize the widget Widget.prototype.init = function() ( this._initUI(); this._bindHandlers(); this._updateData(); ) // Return the widget class return Widget; ))(); new WeatherWidget();

What's going on here? We create a module based on the WeatherWidget closure, inside it we write the Widget class, into the prototype of which we add the necessary methods and return it from the closure. The last line we create an instance of the widget - new WeatherWidget();

The XHR variable is needed to perform ajax requests. In the constructor, we initialize the url property, from which we will receive weather data. There is also a ui object that stores 3 fields - the very DOM elements that we need access to from js code. They are initialized later, in the _initUI() method. The init() method causes the ui to be initialized, events to be bound, and data to be updated from the server (we want the user to immediately see the weather when rendering the widget without clicking Refresh). In _bindHandlers, the _updateData method is bound to a click on the Update button. This is the only "interactive" part of our widget.

Pay attention to the construction Widget.prototype._updateData.bind(this). Here we explicitly bind the context - we need this to always point to an instance of the Widget class in the _updateData method. Now it will be clear why - let's look at the code of the _updateData method

Receiving data from the server, _updateData method

// Update weather data Widget.prototype._updateData = function(e) ( e && e.preventDefault(); var xhr = new XHR(), city = this.ui.citySelect.value, temperatureSpan = this.ui.temperatureSpan , data = "city=" + city, resp; xhr.open("POST", this.url, true); xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xhr.send(data); xhr.onreadystatechange = function() ( if (this.readyState != 4) return; if (this.status != 200) ( console.log("Request error"); return; ) resp = JSON.parse(this.responseText); temperatureSpan.innerHTML = resp.temperature; ) )

Please note that we pass the e (event) property to the method parameters. It is needed to make preventDefault at the very beginning, so as not to reload our widget (otherwise the form submit will work).
But we do it with this line
e && e.preventDefault();
This additional check for the presence of the e parameter is necessary because when we call this._updateData(), the e parameter will be undefined, and accordingly e.preventDefault() will throw an exception.

After this, we create the necessary variables, an object for the Ajax request, the selected city and a DOM element into which we display the temperature value received from the server. data will be sent in an ajax request, resp is the response from the server. Next we open the connection and send data to the server. We wait for a response of 200 from the server and display the resulting temperature in span. Let's agree that a json string comes from the server in the format ("code": "success", "temperature": "temperature range"). Traditionally, I will leave error handling to your conscience; everyone does it differently. Finally, we need to find out how to get weather data from our server.

How to find out the weather?

I recommend using this service with caution. When the article was almost ready, the format of the response to a request about the weather suddenly changed. The output of the forecast by time of day, which I initially wanted to demonstrate in the widget, was cut off. I had to partially rewrite the code and reduce the functionality of the widget, which did not make me happy. I don’t know how often such things happen with them, but I don’t recommend using the service in a real application.

Writing php code to get weather information

It’s already clear how to take the data, the algorithm is simple: we pull out the city parameter from $_POST - the selected city, and create a string like http://xml.meteoservice.ru/export/gismeteo/point/$cityId.xml. This is the path to the weather file. We send a get request to it using curl. We parse the received response and extract the necessary parameters from it: minimum and maximum temperatures. We send the resulting numbers in a json object back to the browser.

$cityId = (int)$_POST["city"]; $url = "http://xml.meteoservice.ru/export/gismeteo/point/$cityId.xml"; $temperature = ""; if ($curl = curl_init()) ( curl_setopt($curl, CURLOPT_URL, $url); curl_setopt($curl, CURLOPT_RETURNTRANSFER, true); $result = curl_exec($curl); curl_close($curl); $xml = simplexml_load_string ($result); $object = $xml->REPORT->TOWN->FORECAST->TEMPERATURE; $temperature = $object["min"] . "-" . $object["max"]; ) echo json_encode( array("code" => "success", "temperature" => $temperature));

Let me explain about simplexml_load_string - this function creates an xml object that we can already parse. And an object is created from the xml string that we receive from the weather service.
REPORT->TOWN->FORECAST->TEMPERATURE - this is the path through the xml nodes to get to the desired temperature values. Follow the link above (Moscow weather) and you will clearly see these paths.
If something is unclear, ask in the comments.

Total

And that is all! We have created a simple widget for obtaining weather information. Its main feature is that it is very easy to embed on any website, you just need to insert the following lines into the html code

I believe that there are many options for using such widgets, from collecting various information to advertising banners. Do you have any ideas where this can be applied? Share in the comments!

It's simple! In less than 5 minutes, you can update your website or blog with an interactive clock, making it more vibrant and user-friendly

Why a clock widget generator from a website?

1. Our html5 widgets do not slow down your web pages
2. They are mobile friendly
3. Our wonderful clock does not use FLASH at all, which means your website or blog will not receive penalty points from Google
4. You can easily place up to 10 widgets in a row on a page.

FAQ

Can I post more than one watch on my page/site? Yes, you can place as many clocks as you like on a page or website. Can I change the widget code? In general, we do not allow changes to be made to the code that we provide. The clock may not work correctly if changes are made, so we advise you to simply paste the code "as is". However, if you are familiar with html, you can change the following: color, size, alignment and highlighting of the text, make small changes to the text of the digital clock. Other changes, especially the removal of hyperlinks, are not permitted. Your copy of the watch may be blocked at any time after changes have been made. The city for which I need a clock uses daylight saving time. Will the clock show the correct time after switching to winter time? Yes, sure! Our clocks take into account the changes associated with summer/winter time transitions around the world!

Bring your support directly to your customers

Everything your customers need is right there

When a vendor uses Zendesk Embeddables, their customers have support right at their fingertips. With Embeddables, businesses can reach out to customers and provide support, information, or start a conversation. And thanks to excellent integration into a mobile application or web page, it all happens like magic.

• help center

• Chat

• Tickets

Mobile SDK

Web Widget

How it works

Customer support happens organically, like magic

Zendesk Embeddables is a combination of Web Widget and Mobile SDK components, suitable for both Android and iOS. These components allow developers to embed Zendesk features—help center, chat, or tickets—into virtually any app, website, or standalone device. This helps maintain brand integrity, improves the efficiency of support operations and minimizes inconsistency for customers.

Magic Embeddables

• Improving the quality of customer service

  Support should not be limited to service alone. Built-in support wherever your customers find themselves—across every channel, on every device, in every environment—reduces the effort required to get help and makes top-notch customer service an integral part of any product.

• Problems are resolved faster thanks to context

  When technical problems arise, customers should not waste their time investigating on their own. Zendesk Embeddables automatically generates information about the device or application version you are using when an issue occurs. This will save you time and effort and help you get to the bottom of your request for help quickly.

• Give yourself room to grow

  Embeddables reduces unnecessary steps by delivering the right information at the right time and in the right place. This combination of comprehensive services and streamlined workflow improves support efficiency and frees up the resources you need to grow your business.

  Mobile SDK

  Build support right into your mobile app

  Enhance mobile support with self-service

  Let customers find the answers themselves - add a help center to their mobile environment. This will speed up the response time and reduce the load on the support team.

  Turn on at the right moment

  If a question requires your help, offer a contact form or invite them to an online chat. The user will be much more comfortable if he doesn’t even have to leave your application.

  More context - faster solution

  Automatically capture important customer information, such as device type or operating system, so support agents have all the context they need.

  Start with Mobile SDK

  For developers

  Our Mobile SDK versions are designed specifically for iOS and Android. Get started right now with ready-made interfaces or create your own custom environment.

  Mobile SDK documentation

  
  

  Web Widget

  Connect with users on your website

  Built-in support to suit your needs

  Decide how you want support to work on your website, as Web Widget can offer knowledge base search, contact form, live chat or callback functionality.

  Smart suggestions to save time

  Customers don't have to hunt for help on your site or elsewhere: Web Widget delivers relevant knowledge base articles exactly when they need them.

  One-Stop Support Environment

  Web Widget offers users an optimal interface that is equally simple on both desktop and mobile devices. In addition, the client receives help in his native language, selected in the browser settings.

  Get widget

  For developers

  All you need to install a Web Widget on your website is a piece of Javascript code. With our Web Widget APIs, you can pass your own data, define custom styling, and better control the widget's behavior.

  Web Widget API

  

  “The Zendesk SDK allows us to meet customers where they are without interrupting their business.”

  - Jeremy Fair, Business Systems Operations, Big Fish Games

  Get started. Try the product in action.

  Sign up and get started with Embeddables - watch the magic happen

  Get started

A widget is a small utility application that performs a specific function.

Modern widgets can provide any information, complement the desktop, and provide messaging. To understand what a widget is, think about the signal that indicates that you have received another letter. This is the most common example of a widget.

Let's figure out what widgets are and how to use them. From a formal point of view, a widget is a small application tailored for the implementation of some useful task. It is not entirely easy to understand what the word “widget” means, because for a long time various gadgets were called that way, but over the past 20 years special applications have appeared, written in HTML or JavaScript and performing a specific function.

The widget can show the weather on the home screen of a mobile phone or a large clock on a computer. But you can often hear another description, more generalized. This is an icon (graphic or text symbol) that launches the program itself.

Today, most widgets are used on the Android operating system, social networks and almost all browsers Opera, Yandex, Chrome, etc.

Classification

By appearance

Widgets are classified by appearance, functionality and installation location. Based on their appearance, the following types of programs are distinguished:

1. Toppers located at the top of the screen and look like a strip with a field and a button. They perform an informational function, informing about promotions and discounts, and can also be used to collect contacts.
2. The flor performs the same functions as the topper, but is located at the bottom of the screen.
3. Pop-up windows that overlap a website page. They are used for messages about various kinds of promotions or for invitations to leave contact information.
4. Shortcuts are located on the side of the screen and are used to receive feedback from site visitors.
5. Embeddable widgets.

All widgets can also be divided into groups for the desktop (desktop widgets) and . Developers can place a variety of visual and text programs on website pages. The user can only interact with them.

According to the installation location

Web widgets

This type of widget is built into a website. To understand what a widget is on a website, we must take into account that programmers have divided this type of application into:

• interactive – those with which you can interact;
• non-interactive, working autonomously, regardless of the consumer’s wishes.

A more accurate name for the second type is informer. A classic example is showing a weather forecast or displaying changes in exchange rates.

Examples of interactive widgets include social media widgets and message widgets. Social network widgets are familiar buttons with Facebook logos,