API
How to insert organization member grid to your organization page?
Minimally add the following code to your webpage, in the <head> section:
<script src="https://constellations.belong-events.com/api/lib/belong.v1.js" id="belong-events-api" defer>
</script>
<script defer>
const conf = {
organizationId: 7048,
};
document.addEventListener('DOMContentLoaded', function () {
window.belong.organizationMembers(conf);
});
</script>
This can be used for example in Google Sites embeds or in many other web engines.
Configuration
In the code above there is used one mandatory configuration parameter - organizationId - which must be replaced by your organization ID.
The following is the complete list of parameters:
organizationId
Data type: integer. Positive.
Required.
Description: An identifier of an organization of which members will be shown. It can be found from the organization web address. For example if the address is
https://constellations.belong-events.com/et/organization/7062/my-organization
then 7062 is the organizationId.
organizationMembersElementId
Data type: string. A css element ID.
Optional.
Default value: organization-members
Description: Assumption is that there is following element
<div id="organization-members"></div>
in the page which will be populated. If the ID is different it should specified by this configuration parameter.
styling
Data type: string. Possible values: "default" or "custom".
Optional.
Default value: default
default value loads default styles. It allows to see quick results without going into technical styling details.
custom value prevents loading default stylesheet and assumes the custom styles are already there.
Description: You can copy the original stylesheet and start customizing it.
template
Data type: string. HTML code with template variables.
Optional.
Default value:
<a class="organization-member" href="{{url}}">
<div class="image" style="background-image: url('{{image}}');"></div>
<div class="name">{{name}}</div>
</a>
Description: This is the template by which every entry is generated. All the generated entries are inserted into #organization-members element. Placeholders are in between double curly braces {{...}}. In this element following placeholders can be used:
url - a person page URL
image - an image URL
name - person name
email - person email
phone - person phone
debug
Data type: boolean.
Optional.
Default: false
If true, then complete configuration is emitted to JS console.
API endpoint
API endpoint URL is following:
https://constellations.belong-events.com/api/v1/organization/{{organizationId}}/members
{{OrganizationId}} must be replaced by appropriate number which can be found from the URL of an organization.
The API responds with a list of public members in JSON format. For example:
{
"status": "ok",
"data": [
{
"id": 6964,
"name": "John Doe",
"image": "https://constellations.belong-events.com/sites/default/files/styles/id_image/public/person/6964-3b8cc9371cd708aa82b648af7bb7e101.jpg?itok=Lw9WazNJ",
"email": "john@example.com",
"phone": "(+1) 123 123 123",
"url": "https://constellations.belong-events.com/person/6964/john-doe"
},
{
"id": 6959,
"name": "Jane Smith",
"image": "https://constellations.belong-events.com/sites/default/files/styles/id_image/public/person/6959-3ed190bcaeba32d27839b9ac074c8962.jpg?itok=z8Jl4u8a",
"email": "jane@example.com",
"phone": "(+1) 123 123 123",
"url": "https://constellations.belong-events.com/person/6959/jane-smith"
}
]
}
If the request was successful, then status will have ok value, otherwise error. In the latter case there will be error field which will contain error description.
Some fields must may be missing like email, phone or image url if they are not specified by the user.
Versioning
API endpoints
https://constellations.belong-events.com/api/v1/organization/{{organizationId}}/members
The version belongs to the domain (in this case organization) that follows the version number. So each API "domain" may have different numbers. The numbers increase when there are non-backwards compatible changes. When new fields are added, then no version change.
Library
When some of the API domains increase the version a new library version will be available. It means there could be some sort of incompatibility.