Embedding
UI Bakery self-hosted can be easily embedded in other web applications and pages. It is also possible to setup two-way communication between an embedded app and the website the app is embedded in.
Before you proceed, make sure that
UI_BAKERY_EMBEDDED_ENABLE_ACTIONS_EXECUTION=true
variable is enabled in your instance.- 1.Embed UI Bakery in an iframe where
src
is a link to an Embedded UI Bakery application (e.g.https://custom-uibakery.com/share/SKDUFYUDF
)
<script src="https://custom-uibakery.com/uibakery-embedded.js"></script>
<iframe width="100%" height="50%" id="uibakery" src="https://custom-uibakery.com/share/SKDUFYUDF"></iframe>
- 2.Add a script tag to the page where UI Bakery app is embedded to communicate with internal app actions:
<input type="number" value="10" />
<button>Execute Action</button>
<script>
const bakery = UIBakery('#uibakery');
bakery.onReady(() => {
document.querySelector('button').addEventListener('click', () => {
const limit = parseInt(document.querySelector('input').value, 10);
// execute UI Bakery action with {{params}} = { limit: 10 }
bakery.triggerAction('actionName', { limit });
});
// listen to messages sent from UI Bakery
bakery.onMessage('eventName', params => {
console.log(params);
});
});
</script>
To listen to messages from UI Bakery, use the
bakery.onMessage('eventName')
method:- In your host app, listen to a message from a UI Bakery app:
bakery.onReady(() => {
//...
bakery.onMessage('eventName', params => {
console.log(params);
});
});
- In the UI Bakery app, send the message (for example, in an Action code) so that it can be received by the host app.
UIBakeryEmbedded.emitMessage('eventName', {{data}}) ;
To send a message from the host app to UI Bakery, use
bakery.triggerAction('actionName', { ... });
method. This method triggers a specific action and passes the second argument as a {{params}}
variable:- In your host app, trigger an action with the custom params:
- In the UI Bakery app, create the 'setUser' action and use
{{params}}
variable to receive the data:
// ... setUser action
console.log({{params.user}});
return {{params.user}}
Last modified 5mo ago