Concured SDKs
The recommended way to interact with the Concured API is by using one of our official SDKs. Today, Concured offers a fine-tuned JavaScript library to make your life easier and give you the best experience when consuming the API.
JavaScript SDK
The Concured JavaScript SDK is a library that allows you to easily integrate Concured recommendations into your website. It is designed to be as simple as possible to integrate and use, while still being flexible enough to allow you to customise the experience to your needs.
JavaScript
JavaScript
<script src="https://assets.concured.com/script/script.min.js"></script>
<script async type="text/javascript">
concured.id = {client_id};
concured.name = {client_name};
concured.init();
</script>
HTML
The recommendations are anchor by the below HTML placed in pages that the bar should render.
Engagement bar HTML
<div class="concured concured-recommendations"
data-concured-ui="bar"
data-concured-cta="default"
data-concured-columns="4"
data-concured-scroll="600">
</div>
In-page HTML
<div class="concured concured-recommendations"
data-concured-ui="box"
data-concured-cta="default"
data-concured-columns="4">
</div>
The HTML has a number of data attributes applied, this enables parameters to be sent to the JavaScript to control the render of the component.
data-concured-ui
Set the type of Concured UI component that will be rendered. Currently supports:
bar box modal data-concured-columns
How many columns will be rendered within the component. Currently supports 3 or 4 columns.
data-concured-scroll
At what scroll depth the component will render. Currently supports pixels and the bar UI component.
data-concured-cta
This enables switching of the CTA for different variants found in the client config by the client. If a CTA is enabled, the code will default to the default CTA if there are no other references.
CSS
The CSS specific to Concured recommendations is loaded from the Concured CDN and is referenced in the HTML.
CSS
<link rel="stylesheet" href="https://assets.concured.com/style/{client_name}/example.css" />
JSON
The client config file is loaded from the Concured CDN, within the given parameters it is specific to the client implementation.
The config enables the JavaScript SDK to render the correct recommendations, analytics, and UI for the client.
A default config is created when first onboarding but a custom config can built by the Concured team as part of discovery.
Client config file
{
"client_name": "", - Name of client
"client_key": "", - API key used to access the recommendations.
"plausible_analytics": "", - If present, triggers Plausible tracking with domain value.
"google_analytics": "", - If present, triggers GA4 tracking with measurement ID.
"beacon_analytics": "", - If present, triggers Beacon tracking with client ID.
"bar": { - The type of HTML template used.
"cta": true, - Does it have a CTA
"title": "Recommended title", - Title for the bar
"fallback_image": [ - An array of images that can be used if an image is missing from the content.
"https://static.concured.com/images/fallback/example/example.png"
]
},
"recommendation_utm": {
"utm_source": "concured", - UTM tracking is available for recommendation links.
"utm_medium": "display",
"utm_campaign": "concured+ai",
"utm_content": "concured+ai+recommendation"
},
"cta_utm": {
"utm_source": "concured", - Separate UTM tracking is available for call to action links.
"utm_medium": "display",
"utm_campaign": "concured+ai",
"utm_content": "concured+ai+book+a+demo"
},
"cta": [ - If there is a CTA there is an array of different content to choose from.
{
"default": {
"title": "Event title", - Title of the CTA.
"image": "https://example.com/example.png", - Image used for the CTA.
"url": "https://example.com", - Link for the CTA
"text": "Special event extra text" - Additional text if necessary.
}
}
]
}