---
{
	"title": "Plugins",
	"language": "en",
	"description": "Plugins - Documentation - Web Experience Toolkit (WET)",
	"altLangPrefix": "plugins",
	"dateModified": "2014-03-31"
}
---
<p>A WET plugin provides various types of functionality useful to a website and provided by calling the function in the class attribute of an HTML tag.</p>
<ul>
	<li><a href="bgimg/bgimg-en.html">Background image</a> - Apply a background image from the given URL in parameter or as per the srcset information.</li>
	<li><a href="cal-events/cal-events-en.html">Calendar of Events</a> - Dynamically generates a calendar interface for navigating a list of events.</li>
	<li><a href="charts/charts-en.html">Charts and graphs</a> - Dynamically generates charts and graphs from table data.</li>
	<li><a href="collapsible-alerts/collapsible-alerts-en.html">Collapsible alerts</a> - Make alerts collapsible by users.</li>
	<li><a href="country-content/country-content-en.html">Country Content</a> - A basic AjaxLoader wrapper that inserts AJAXed-in content based on a visitor's country as determined by https://freegeoip.net</li>
	<li><a href="data-ajax/data-ajax-en.html">Data Ajax</a> - Displays an overlay when a section moves out of the viewport.</li>
	<li><a href="data-fusion-query/data-fusion-query-en.html">Data Fusion Query</a> - Map a query parameter value into an input value.</li>
	<li><a href="data-inview/data-inview-en.html">Data Inview</a> - Displays an overlay when a section moves out of the viewport.</li>
	<li><a href="data-picture/data-picture-en.html">Data Picture</a> - Event driven port of Picturefill.</li>
	<li><a href="equalheight/equalheight-en.html">Equal height</a> - A plugin for responsive equal height.</li>
	<li><a href="exitscript/exitscript-en.html">Exitsctipt</a> - Redirects users to non secure sites.</li>
	<li><a href="favicon/favicon-en.html">Favicon</a> - This plugin provides the ability to add and update the favicon's on a web page.</li>
	<li><a href="feedback/feedback-en.html">Feedback form</a> - Allows users to submit feedback for a specific Web page or Web site.</li>
	<li><a href="feeds/feeds-en.html">Feeds</a> - Aggregates and displays entries from one or more Web feeds.</li>
	<li><a href="filter/filter-en.html">Filter</a> - Filters through content and only show content that match a certain keyword.</li>
	<li><a href="footnotes/footnotes-en.html">Footnotes</a> - Provides a consistent, accessible way of handling footnotes across websites.</li>
	<li><a href="formvalid/formvalid-en.html">Form validation</a> - Provides generic validation and error message handling for Web forms.</li>
	<li><a href="geomap/geomap-en.html">Geomap</a> - Displays a dynamic map over which information from additional sources can be overlaid.</li>
	<li><a href="lightbox/lightbox-en.html">Lightbox</a> - Helps build a photo gallery on a web page.</li>
	<li><a href="menu/menu-en.html">Menu</a> - Provides an interactive menu with optional sub-menus.</li>
	<li><a href="multimedia/multimedia-en.html">Multimedia player</a> - Provides an accessible multimedia player for embedding video and audio into web pages.</li>
	<li><a href="overlay/overlay-en.html">Overlay</a> - A flexible, responsive overlay plugin.</li>
	<li><a href="prettify/prettify-en.html">Prettify</a> - Provides syntax highlighting of source code snippets in an HTML page using <a href="https://github.com/google/code-prettify">google-code-prettify</a>.</li>
	<li><a href="wb-postback/wb-postback-en.html">Postback</a> - Submit web form through AJAX call.</li>
	<li><a href="wb-randomize/wb-randomize-en.html">Randomize</a> - Randomly picks one of the child elements.</li>
	<li><a href="session-timeout/session-timeout-en.html">Session timeout</a> - Helps Web asset owners to provide session timeout and inactivity timeout functionality.</li>
	<li><a href="share/share-en.html">Share widget</a> - Facilitates sharing Web content on social media platforms.</li>
	<li><a href="stepsform/stepsform-en.html">Steps Form</a> - Splits a form into steps.</li>
	<li><a href="tabs/tabs-en.html">Tabbed Interface</a> - Dynamically transforms multiple sections of content into a tabbed interface.</li>
	<li><a href="tables/tables-en.html">Tables</a> - Integrates the DataTables plugin into WET providing searching, sorting, filtering, pagination and other advanced features for tables.</li>
	<li><a href="texthighlight/texthighlight-en.html">Text highlighting</a> - Automatically highlights certain words on a Web page. The highlighted words can be selected via the query string.</li>
	<li><a href="toggle/toggle-en.html">Toggle</a> - Allows a link to toggle elements between on and off states.</li>
	<li><a href="twitter/twitter-en.html">Twitter embedded timeline</a> - Helps with implementing Twitter embedded timelines.</li>
</ul>

<h2>Using your own plugin</h2>

<p>In order to have your plugin working with WET:</p>
<ol>
	<li>Your plugin needs to follow the WET plugin initialisation.</li>
	<li>Your script needs to be inserted after the <code>wet-boew.min.js</code> script in your page.</li>
	<li>An element in your page needs to call the plugin by having the plugin name in its class atttribute.</li>
</ol>

<p>Take a look at the <a href="../../demos/helloworld/helloworld-en.html">Hello world</a> example.</p>
