What are embeddable widgets?

Embeddable widgets are a great way for you to share things like impact data or activity schedules externally on your website.

Impact Statistic Widgets: Display your real-time impact data in singular metric blocks.
Activity Schedule Table: Display your upcoming activities schedule in a table format. For each activity, the day, activity name, address and operation times will be displayed.
Activity Schedule Map Function: Display your location of your events for people to browse, including times, days and more live from your Volaby platform
(if this is something that interests you then please contact our team directly)

How to set up an embeddable widget

A new section in your Volaby Admin Console. This tab provides an introduction to the widgets along with two tables, one for the Tenants Custom IDs and another for the Tenants Activity IDs.

Instructions/Developers Docs

Navigate to your admin console and click the embeddable widgets tab.
First you will see an introduction and some information about each of the Widget Types.
Custom Field IDs can be viewed in a table format, these are what are used to configure the Impact Statistic Widgets.
Activity IDs can be viewed in a table format, these are what are used to configure the Activity Schedule Table Widget.
Both tables have the features of search, download CSV, print, view particular columns and filter.

Impact Statistics Widget

An embeddable widget that displays a singular metric tracked by Volaby in an appealing way that is easy to add to any website. With the option of customisable colours and label to suit the Tenants needs. This widget was created via a custom HTML element which can be inserted into any part of a webpage (also compatible within React). It operates via a JavaScript <script> tag.

An example snippet of code to get this working is:

<head>

</head>

<body>

<impact-widget

data-bg-color="#584cda"

data-text-color="#fcfcfc"

data-label="Books given last month"

data-widget-type="custom"

data-volaby-id="INSERT VOLABY ID"

data-field-id="your-field-id-goes-here" >

</impact-widget >

</body>

This is a static widget for display purposes only. The user does not interact with it, besides viewing the content.

Instructions

Instructions for setting and configuring this widget is also available in-app through the Admin Console.

Activity Schedule Table Widget

An embeddable widget that utilises the Tenants Activity Data, and displays fixed activity locations in a tabular format with a default of 1 weeks worth of activities. An option to specify weeks to be displayed is available. This widget was created via a custom HTML element which can be inserted into any part of a webpage (also compatible within React). It operates via a JavaScript <script> tag.

An example snippet of this looks like:

<head>

</head>

<body>

<activity-table

data-activity-ids="INSERT ACTIVITY ID'S"

data-volaby-id="INSERT VOLABY ID"

data-number-of-weeks="4">

</activity-table>

</body>

This is a static widget for display purposes only. The user does not interact with it, besides viewing the content.

Instructions

Instructions for setting and configuring this widget is also available in-app through the Admin Console.