This guide creates a connected embed and tests it in the preview tool.
Before using the SDK, complete onboarding with Digitaal Vlaanderen. Email Mijn Burgerprofiel aansluitingen with the URL or URLs you want to embed and where they will open, such as a city app, the Burgerprofiel app, or burgerprofiel.be.
After the integration is approved, you receive an SDK client ID.
Install the package from npm:
npm install @govflanders/mbp-embed-sdk
Create the client when the embedded page starts. Configure allowedHosts with the host origins that may connect to the embed. Keep this list limited to the hosts you expect in production.
import { createMbpEmbedClient } from '@govflanders/mbp-embed-sdk';
const mbpClient = createMbpEmbedClient('your-client-id', {
allowedHosts: [
'https://*.burgerprofiel.be/*',
'https://partnerportaal.vlaanderen.be/*',
],
});
async function connectEmbed() {
try {
await mbpClient.connect();
await mbpClient.ui.setTitle('Mijn loket');
await mbpClient.ui.setStatusLoading(false);
} catch (error) {
console.error('Could not connect to Mijn Burgerprofiel', error);
showEmbedUnavailable();
}
}
void connectEmbed();
Call SDK methods after connect() succeeds. setStatusLoading(false) tells the host that it can show the embedded page.
A standalone browser page has no host application, so connect() times out. Use the embed preview tool to test the connection and basic host behaviour.
Test the embed in every host where it will run before release.