Web widget

Last updated April 20, 2024

A web widget is a web page or web application that is embedded as an element of a host web page but which is substantially independent of the host page, having limited or no interaction with the host.^[1] A web widget commonly provides users of the host page access to resources from another web site, content that the host page may be prevented from accessing itself by the browser's same-origin policy or the content provider's CORS policy. That content includes advertising (Google's AdSense), sponsored external links (Taboola),^[2] user comments (Disqus),^[3] social media buttons (Twitter,^[4] Facebook), news (USA Today),^[5] and weather (AccuWeather).^[6] Some web widgets though serve as user-selectable customizations of the host page itself (Elfsight, Powr, OpenWidget).

Technology

Widgets may be considered as downloadable applications which look and act like traditional apps but are implemented using web technologies including JavaScript, HTML and CSS. Widgets use and depend on web APIs exposed either by the browser or by a widget engine such as Akamai, Clearspring, KickApps, MassPublisher, NewsGator or many others.

Sites such as FormLoop allow users to easily create widgets from their own content with no coding knowledge necessary.

Usage in social media

End users primarily use widgets to enhance their personal web experiences, or the web experiences of visitors to their personal sites.

The use of widgets has proven increasingly popular, where users of social media are able to add stand-alone applications to blogs, profiles and community pages. Widgets add utility in the same way that an iPhone application does. The developers of these widgets are often offering them as a form of sponsored content, which can pay for the cost of the development when the widgets' utility maps to the user's needs in a way where both parties gain. For example, a sports news brand might gain awareness and increased audience share in exchange for the utility of current game scores being instantly and dynamically available - the blog which posted the Sports score widget might gain in having a stickier site.

Video platforms such as YouTube and Dailymotion support iframe-based video embedding.^[7]^[8]

Security considerations

As any program code, widgets can be used for malicious purposes. One example is the Facebook "Secret Crush" widget, reported in early 2008 by Fortinet as luring users to install Zango adware.^[9]

One important factor with client-side widgets is that often the host can not control the content. The content or the functionality it provides cannot be modified by the host. The content is pre-published by the publisher/author/service provider and the host can either accept that content or not use the widget. The host does, however, control the placement of the Widget. Because the host can always take the Widget down, it assures a large degree of mutual advantage and satisfaction with performance and content.

SEO considerations

Web widgets can affect page rank in two ways. First, links generated by client-side widgets will not be seen by search engines that do not "run" the widget code before analysing the page. Those links will not contribute to page rank.^[10] Second, pages may be penalized for hosting widgets that automatically place links into the page, thereby manipulating page rank.^[11]

Accessibility considerations

Web widgets are complex UI controls. WAI-ARIA^[12] is a technology that can improve the Usability and Accessibility of such widgets by adding in further semantics that browsers and assistive technologies can recognize and use to facilitate users' interactions. For example, a tabpanel widget must contain a specific set of roles (i.e. tablist, tab, tabpanel, etc.)^[13] and must follow specific interactions (i.e. keyboard navigation).^[14]

Widget management systems

Widget management systems offer a method of managing widgets that works on any web page, such as a blog or social networking home page. Many blog systems come with built-in widget management systems as plug-ins. Users can obtain widgets and other widget management tools from various widget companies.

Mobile Web widget

A Mobile Web widget has the same purpose and function as a web widget, but it is made for use on a mobile device such as mobile phone or tablet. In contrast, a web widget is on a personal computer or laptop computer.

Standards

The W3C is creating a set of standards for web widgets.^[15]

Related Research Articles

<span class="mw-page-title-main">World Wide Web</span> Linked hypertext system on the Internet

The World Wide Web is an information system that enables content sharing over the Internet through user-friendly ways meant to appeal to users beyond IT specialists and hobbyists. It allows documents and other web resources to be accessed over the Internet according to specific rules of the Hypertext Transfer Protocol (HTTP).

Web design encompasses many different skills and disciplines in the production and maintenance of websites. The different areas of web design include web graphic design; user interface design ; authoring, including standardised code and proprietary software; user experience design ; and search engine optimization. Often many individuals will work in teams covering different aspects of the design process, although some designers will cover them all. The term "web design" is normally used to describe the design process relating to the front-end design of a website including writing markup. Web design partially overlaps web engineering in the broader scope of web development. Web designers are expected to have an awareness of usability and be up to date with web accessibility guidelines.

Gecko is a browser engine developed by Mozilla. It is used in the Firefox browser, the Thunderbird email client, and many other projects.

A HTML editor is a program used for editing HTML, the markup of a web page. Although the HTML markup in a web page can be controlled with any text editor, specialized HTML editors can offer convenience, added functionality, and organisation. For example, many HTML editors handle not only HTML, but also related technologies such as CSS, XML and JavaScript or ECMAScript. In some cases they also manage communication with remote web servers via FTP and WebDAV, and version control systems such as Subversion or Git. Many word processing, graphic design and page layout programs that are not dedicated to web design, such as Microsoft Word or Quark XPress, also have the ability to function as HTML editors.

The World Wide Web Consortium (W3C)'s Web Accessibility Initiative (WAI) is an effort to improve the accessibility of the World Wide Web for people with disabilities. People with disabilities encounter difficulties when using computers generally, but also on the Web. Since they often require non-standard devices and browsers, making websites more accessible also benefits a wide range of user agents and devices, including mobile devices, which have limited resources. According to a US government study, 71% of website visitors with disabilities will leave a website that is not accessible.

An HTML element is a type of HTML document component, one of several types of HTML nodes. The first used version of HTML was written by Tim Berners-Lee in 1993 and there have since been many versions of HTML. The current de facto standard is governed by the industry group WHATWG and is known as the HTML Living Standard.

A user interface markup language is a markup language that renders and describes graphical user interfaces and controls. Many of these markup languages are dialects of XML and are dependent upon a pre-existing scripting language engine, usually a JavaScript engine, for rendering of controls and extra scriptability.

Microformats (μF) are a set of defined HTML classes created to serve as consistent and descriptive metadata about an element, designating it as representing a certain type of data. They allow software to process the information reliably by having set classes refer to a specific type of data rather than being arbitrary.

iWeb is a template-based WYSIWYG website creation tool developed by Apple Inc. The first version of iWeb was announced at the Macworld Conference & Expo on January 10, 2006, as part of the iLife ’06 suite of digital lifestyle applications. iWeb '11 was released on October 20, 2010 as part of the iLife ’11 suite, though it was not updated from the previous release.

Google Web Toolkit, or GWT Web Toolkit, is an open-source set of tools that allows web developers to create and maintain JavaScript front-end applications in Java. It is licensed under Apache License 2.0.

A software widget is a relatively simple and easy-to-use software application or component made for one or more different software platforms.

Cascading Style Sheets (CSS) is a style sheet language used for specifying the presentation and styling of a document written in a markup language such as HTML or XML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.

Disqus is an American blog comment hosting service for websites and online communities that use a networked platform. The company's platform includes various features, such as social integration, social networking, user profiles, spam and moderation tools, analytics, email notifications, and mobile commenting. It was founded in 2007 by Daniel Ha and Jason Yan as a Y Combinator startup.

The Web platform is a collection of technologies developed as open standards by the World Wide Web Consortium and other standardization bodies such as the Web Hypertext Application Technology Working Group, the Unicode Consortium, the Internet Engineering Task Force, and Ecma International. It is the umbrella term introduced by the World Wide Web Consortium, and in 2011 it was defined as "a platform for innovation, consolidation and cost efficiencies" by W3C CEO Jeff Jaffe. Being built on The evergreen Web has allowed for the addition of new capabilities while addressing security and privacy risks. Additionally, developers are enabled to build interoperable content on a cohesive platform.

Modern HTML5 has feature-parity with the now-obsolete Adobe Flash. Both include features for playing audio and video within web pages. Flash was specifically built to integrate vector graphics and light games in a web page, features that HTML5 also supports.

Content Security Policy (CSP) is a computer security standard introduced to prevent cross-site scripting (XSS), clickjacking and other code injection attacks resulting from execution of malicious content in the trusted web page context. It is a Candidate Recommendation of the W3C working group on Web Application Security, widely supported by modern web browsers. CSP provides a standard method for website owners to declare approved origins of content that browsers should be allowed to load on that website—covered types are JavaScript, CSS, HTML frames, web workers, fonts, images, embeddable objects such as Java applets, ActiveX, audio and video files, and other HTML5 features.

HTML5 Audio is a subject of the HTML5 specification, incorporating audio input, playback, and synthesis, as well as in the browser. iOS

Front-end web development is the development of the graphical user interface of a website through the use of HTML, CSS, and JavaScript so users can view and interact with that website.

WebXR Device API is a Web application programming interface (API) that describes support for accessing augmented reality and virtual reality devices, such as the HTC Vive, Oculus Rift, Oculus Quest, Google Cardboard, HoloLens, Apple Vision Pro, Magic Leap or Open Source Virtual Reality (OSVR), in a web browser. The WebXR Device API and related APIs are standards defined by W3C groups, the Immersive Web Community Group and Immersive Web Working Group. While the Community Group works on the proposals in the incubation period, the Working Group defines the final web specifications to be implemented by the browsers.

A progressive web application (PWA), or progressive web app, is a type of application software delivered through the web, built using common web technologies including HTML, CSS, JavaScript, and WebAssembly. It is intended to work on any platform with a standards-compliant browser, including desktop and mobile devices.

References

↑ Brad at CD Baby (August 28, 2012). "Website Widgets: What Are They and Why Do I Need Them?". The HostBaby Blog. Archived from the original on August 24, 2019. Widgets: They're those little doo-dads you see on websites, often in the sidebar, that perform one simple function and don't take up much room while they're doing it.{{cite web}}: CS1 maint: unfit URL (link)
↑ "Widgets - Taboola Publisher Help Center". taboola.com.
↑ "Web Integration". disqus.com.
↑ "How to add the Tweet button to your website". twitter.com.
↑ "USATODAY.com Widgets". usatoday.com.
↑ "Free Current Weather Widget". accuweather.com.
↑ "Embed videos & playlists - YouTube Help". support.google.com. Retrieved 2021-04-17.
↑ "Embedding videos". Dailymotion Help Center.
↑ "Internetworking, security, safety and more". Blog.anta.net. Archived from the original on 5 June 2013. Retrieved 2013-09-07.
↑ Troshchey, Yarry (18 February 2016). "How Web Widgets Affect SEO". South Coast Web Design Ltd. Retrieved 2016-02-18.
↑ "A reminder about widget links". Official Google Webmaster Central Blog. September 8, 2016.
↑ "WAI-ARIA Basics". MDN Web Docs. 12 September 2023.
↑ "ARIA: tab role". MDN Web Docs. 12 April 2023.
↑ "Keyboard Interaction". W3.org.
↑ "Web Application Working Group's Widgets: Family of Specifications". W3C. Retrieved 27 March 2013.