Web developer resources

Help more people find and take part in health and care research

We’ve produced a widget which you can place on your website, blog or other digital space to help promote our site and participation in health and care research.

Use the text below to explain the site.

What is Be Part of Research?

Be Part of Research helps connect members of the public and patients with all the information they need to find and take part in health and care research in England.  

The widget

The Be Part of Research widget is available to be used on any site promoting involvement in health and care research. There is no cost involved.

It is compatible with most tech stacks. For specific instructions, please refer to the paragraph titled below, which matches the technology used by your site.

The widget looks like this:

Note: 'distance' is in miles. Ideally this should be set to between 1 and 20 miles, though you can set it to any number greater than 20 if required. The main Be Part of Research site defaults to 20 miles on first visit, so this is what users will see when they click on the 'Find studies now' button on the component. The 'query' parameter accepts a range of medical conditions. The location parameter can be updated to your preferred locale. If you would like to change the default border colour, paste the following variable into your top level CSS, e.g. the root element, changing the hex code to your preferred colour:

* { --bpor-widget-border: #005eb8; }

If the above is not specified in your CSS then the component will default to #16aca7

The straight forward method (using a CDN, compatible with anything)

  1. Copy and paste the following into the html file of the page you would like to use the component:
    <script type="module" src="https://unpkg.com/bpor-dev-resource@0.28.0/dist/bpor-widget/bpor-widget.esm.js"></script>
  2. Copy and paste the following into the place within the html pages' body that you would like the component to appear:
    <bpor-widget distance="20" query="cancer" location="York" > </ bpor-widget >

Angular setup

  1. npm install bpor-dev-resource --save
  2. Copy and paste the following into src/app/app.module.ts:
    import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core':
  3. Add this to your @NgModule object:
    schemas:[CUSTOM_ELEMENTS.SCHEMA]
  4. In main.ts file, copy and paste in:
    import {defineCustomElements} from 'bpor-dev-resource/loader';
    defineCustomElements(window);
  5. Now add the component to e.g. app.component.html:
    <bpor-widget distance="20" query="cancer" location="York" > </ bpor-widget >

React setup

  1. npm install bpor-dev-resource --save
  2. Inside src/index.js (or the file where you render your React app) copy and paste the following:
    import {defineCustomElements} from 'bpor-dev-resource/loader';
    defineCustomElements(window);
  3. Add the following to e.g. App.js (or whereever you want to display the component):
    <bpor-widget distance="20" query="cancer" location="York" > </ bpor-widget >

Vue setup

  1. npm install bpor-dev-resource --save
  2. Inside src/index.js (or the file where you mount your root component to the DOM) copy and paste the following:
    import {defineCustomElements} from 'bpor-dev-resource/loader';
  3. Paste the following somewhere before the place you call new Vue({}):
    defineCustomElements(window);
  4. Add the following wherever required e.g. App.vue:
    <bpor-widget distance="20" query="cancer" location="York" > </ bpor-widget >

Contact us

Via our contact form or email bepartofresearch@nihr.ac.uk.  Requests for the API will be considered but are subject to approval.

Back to the top