Add the DermNet search bar to your website

The DermNet Search Bar code is an application that displays content directly on your web page. You can embed our Search Bar in your practice or hospital website, blog, and other sites. An example of the Search Bar is below (small size, light colour).

Add the DermNet Search Bar to your website and enable your patients and their families to find current, in-depth, and unbiased information that will help them:

  • Learn more about a skin condition;
  • Better understand management and treatment options from an authoritative source; and
  • Share in the decision-making process with health care providers.

When one of your visitors does a search using the DermNet Search Bar, a new browser window will open and they will sent to a list of search results within the DermNet website. 

Installation 

You can embed the search widget once on any page of your website. This widget will instantiate after the windows on load function and allow your visitors to search DermNet's entire library. 

For a basic installation, simply copy and paste the following code where ever you want the search widget to appear:

<div id="dermnetwidget" data-type="small" data-theme="dark"></div><script src="https://www.dermnetnz.org/themes/quicksilver/app/js/components/search-widget.js"></script>

Once you've added the Search Bar, no technical maintenance is required.

Variations in size and colour

There are two different colour schemes and four different sizes available. To change to any of these, simply alter the corresponding attribute in the code.

  • Sizes (data-size): tiny, small, medium, large.
  • Themes (data-theme) attribute: light, dark.

For instance, for a small sidebar widget on a light themed website, you may choose to use the following code, to produce a small light search widget:

<div id="dermnetwidget" data-type="small" data-theme="light"></div><script src="https://www.dermnetnz.org/themes/quicksilver/app/js/components/search-widget.js"></script>

If you have any questions or requests regarding this widget, please contact us and we will assist you.

For specific size codes, see below.

Tiny Search Bar

open

This will produce the following widget 150 pixels  by 118 pixels

<div id="dermnetwidget" data-type="tiny" data-theme="dark"></div><script src="https://www.dermnetnz.org/themes/quicksilver/app/js/components/search-widget.js"></script>

Small Search Bar

open

This will produce the following widget 320 pixels  by 131 pixels

<div id="dermnetwidget" data-type="small" data-theme="dark"></div><script src="https://www.dermnetnz.org/themes/quicksilver/app/js/components/search-widget.js"></script>

Medium Search Bar

open

This will produce the following widget 500 pixels  by 151 pixels

<div id="dermnetwidget" data-type="medium" data-theme="dark"></div><script src="https://www.dermnetnz.org/themes/quicksilver/app/js/components/search-widget.js"></script>

Large Search Bar

open

This will produce the following widget: 885 pixels  by 208 pixels

<div id="dermnetwidget" data-type="large" data-theme="dark"></div><script src="https://www.dermnetnz.org/themes/quicksilver/app/js/components/search-widget.js"></script>

Accordion: Search Bar