.

The below example is in react (with Typescript), but you can also do it using regular JavaScript.


Please note that the capitalised placeholders ("ORGANISATION_ID", "ORGANISATION_GET", and "ORGANISATION_POST") in the examples below need to be updated with the corresponding values.



Search Form:


In the below code we are adding the widget script (defined in the addScript function) if it doesn't already exist in the DOM. If it already exists, we don't re-add it ( see this check !document.getElementById("widget-script") ).


In the return we are rendering the search form to the page. Note, the following:

  • The data-vw-widget="search" is specifying that we want to use the search widget.
  • The data-widget-type="form" is telling the widget that this is a form instance (i.e. is the search part of the, in this case, two-page search widget)
  • The data-results-target="/results" is telling the widget that it should redirect to /results to see the results from the search. If the search results were on the same page, we would set this to "self".
import { useEffect } from "react";

export default function Search(): JSX.Element {
  const addScript = (el: HTMLElement) => {
    const script = document.createElement("script");
    script.id = "widget-script";
    script.setAttribute("data-vw-loader", "");
    script.setAttribute("data-org-id", "ORGANISATION_ID");
    script.setAttribute("data-org-get", "ORGANISATION_GET");
    script.setAttribute("data-org-post", "ORGANISATION_POST");
    script.innerHTML = `
      (function(e, d, u, k, a) {
        e['VolunteerWidgetNamespace'] = u;
        e[u] = {
          l: k,
          e: a
        };
        var s = d.createElement('script');
        s.type = 'text/javascript';
        s.async = true;
        s.src = 'https://d27we5k570jzpl.cloudfront.net/volunteer-widget.js';
        var x = d.getElementsByTagName('script')[0];
        x.parentNode.insertBefore(s, x);
      })(window, document, 'VolunteerWidget', '[data-vw-loader]', '[data-vw-widget]');
    `;
    el.appendChild(script);
  };

  useEffect(() => {
    if (!document.getElementById("widget-script")) {
      addScript(document.body);
    }
  }, []);

  return (
    <div>
      <h1>Search Form</h1>
      <div
        className="search-widget"
        data-vw-widget="search"
        data-widget-type="form"
        data-results-target="/results"
        data-initial-locations="Western Australia"
        data-style-btn-primary="btn btn-success"
        data-filter-by-suitabilities="1,8,11,12"
      />
    </div>
  );
}



Search Results:


In the below code we are adding the widget script (defined in the addScript function) if it doesn't already exist in the DOM. If it already exists, we don't re-add it ( see this check ( !document.getElementById("widget-script") ).


In the return we are rendering the search form to the page. Note, the following:

  • The data-vw-widget="search" is specifying that we want to use the search widget.
  • The data-widget-type="results" is telling the widget that this is a results instance (i.e. is the results part of the, in this case, two-page search widget)
import { useEffect } from "react";

export default function Results(): JSX.Element {
  const addScript = (el: HTMLElement) => {
    const script = document.createElement("script");
    script.id = "widget-script";
    script.setAttribute("data-vw-loader", "");
    script.setAttribute("data-org-id", "ORGANISATION_ID");
    script.setAttribute("data-org-get", "ORGANISATION_GET");
    script.setAttribute("data-org-post", "ORGANISATION_POST");
    script.innerHTML = `
      (function(e, d, u, k, a) {
        e['VolunteerWidgetNamespace'] = u;
        e[u] = {
          l: k,
          e: a
        };
        var s = d.createElement('script');
        s.type = 'text/javascript';
        s.async = true;
        s.src = 'https://d27we5k570jzpl.cloudfront.net/volunteer-widget.js';
        var x = d.getElementsByTagName('script')[0];
        x.parentNode.insertBefore(s, x);
      })(window, document, 'VolunteerWidget', '[data-vw-loader]', '[data-vw-widget]');
    `;
    el.appendChild(script);
  };

  useEffect(() => {
    if (!document.getElementById("widget-script")) {
      addScript(document.body);
    }
  }, []);

  return (
    <div>
      <h1>Search Results</h1>
      <div
        className="vw--search-results"
        data-vw-widget="search"
        data-widget-type="results"
        data-suitabilities="1,8,11,12"
        data-hide-shortlist-btns
        data-hide-eoi-volunteer-profile
        data-style-btn-primary="btn btn-primary"
      >
        <p className="lead text-center">Loading, please wait...</p>
      </div>
    </div>
  );
}