When it comes to sharing BRYTER modules, we recommend making a applications available via a portal. However, if your goal is to offer a single module on a public website, this article outlines the process and provides configuration options to ensure seamless integration.
❗ If you are embedding a secured module that requires end user authentication, please also consult our documentation on third-party cookies.
Embedding BRYTER modules on your website
Using iframe technology, you can embed BRYTER modules with customization options. Iframes, or inline frames, create an invisible frame to house your BRYTER module within your website's content.
The iframe establishes a live connection, allowing you to modify your module's content even after embedding. You can simply publish your changes with a single click when you are ready, eliminating the need for manual website updates.
For websites built on content management systems like WordPress, Drupal, or Typo3, you can easily embed modules using their integrated Rich Text Editors. If you have static HTML pages, you will require a text editor capable of handling HTML code.
1. Copy this code snippet
Plain iframe (fixed height + scrolling)
<iframe id="bryter-module-1" class="bryter-module" src="https://app.bryter.io/s/Mr9qWq9KSiOq72GSe3nNJw/iframe-test" width="100%" height="100%" scrolling="no" frameborder="0"></iframe>
Dynamic iframe (dynamic height - requires JS script, see below in 4. Copy and paste this code snippet under the iframe)
<iframe id="bryter-module-1" class="bryter-module" data-src="https://app.bryter.io/s/Mr9qWq9KSiOq72GSe3nNJw/iframe-test" width="100%" height="0" scrolling="no" frameborder="0"></iframe>
2. Paste the snippet
If you are using a content management system, switch your Rich Text Editor to HTML mode and simply paste the code. For those working with static HTML pages, open the page using a text editor and insert the code within your content.
3. Add your module link
In the attribute 'data-src', replace the placeholder link with the URL of your module obtained during the publishing process. Please make sure to keep the quotation marks intact.
💡 To ensure that your module is accessible to anyone without requiring a login to BRYTER, set end user access to Public.
4. Copy and paste this code snippet under the iframe
This snippet is known as iframe-support.js. See the Some technical notes section as well as the Usage of iframe-support.js section for more tips and best practices.
<script src="https://app.bryter.io/static/js/iframe-support.js"></script>
Some technical notes
- When using multiple modules on a single page, it is important to place the script within the head section of your website.
💡 For static HTML pages, simply cut and paste the script between the <head>…</head> tags. If you are using a content management system, you will need to check the customization settings.
- Remember to assign a unique custom attribute for each id, such as bryter-module-1 in the example above.
💡 When using multiple modules, always give them different names. If you name the first module 'bryter-module-1', you may want to name the second module 'bryter-module-2'.
- Iframe-support.js script ensures automatic scrolling to the top of the page every time a question is answered. This ensures that your end user always starts from the top.
Alternative: Use an iframe with a fixed height
The configuration above demonstrates how to embed an iframe with a variable height, allowing it to adjust based on its content. However, if you prefer to use an iframe with a fixed height, use the following code snippet instead of the one above.
<iframe id="myIframe" data-src="https://app.bryter.io/s/Mr9qWq9KSiOq72GSe3nNJw/iframe-test" scrolling="yes" style="width: 100%; height: 600px; overflow: hidden;"> </iframe>
Message the end of the module session to the parent site
When your BRYTER module is embedded in an iframe, it has the capability to send a post message ('sessionFinished')upon successful completion. This message can be received by the parent site using an event listener, allowing you to trigger additional actions, such as closing the iframe.
To enable this functionality, insert the following code snippet within the <head> section of the parent HTML. Replace 'Implement logic here' with your desired actions.
<script>
function bryterModuleEventListener(event) {
if (event.data.type === 'bryter:module' && event.data.action === 'sessionFinished') {
// Implement logic here
}
} window.addEventListener('message', bryterModuleEventListener)
</script>
Customize distance from top
Static
In certain situations, automatic scrolling may producte unintended outcomes, especially if your site features a dynamic header that overlaps with the content. In such cases, you have the option to customize the space between the top of your website and the embedded module using URL parameters.
Simply add the following parameter to the module's URL to achieve the desired padding effect. You can adjust the number to meet your specific needs.
?paddingTop=100
💡 For example, this will result in a 100px padding from the top:
https://app.bryter.io/s/Mr9qWq9KSiOq72GSe3nNJw/iframe-test?paddingTop=100
Dynamic
In some scenarios, automatic scrolling may result in undesired outcomes, particularly if your website features a fixed header that overlays the content. Additionally, if the header's height can change dynamically, like expanding on smaller screens, merely defining specific padding may not suffice. In such cases, you can employ a special date-header attribute within your iframe tag. This attribute should hold a valid CSS selector capable of targeting your header element.
For instance, let us assume you have the following header element on your page:
<header id="header" class="header"></header>
You can pass #header to your iframe data-header attribute:
<iframe data-header="#header"></iframe>
Now, your header height will be taken into consideration during scrolling and the scroll position will be offset accordingly. But if you do not want to use ID, you can use any other CSS selectors, e.g.,
<iframe data-header="header"></iframe>
In the example above, your header will be selected by HTML tag header.
<iframe data-header=".header"></iframe>
In the example above, your header will be selected by CSS class name .header.
Technical limitations
Some websites, content management systems, or intranet solutions do not allow embedding script tags. You can still embed your BRYTER module but some additional functionalities, such as automatic scrolling will not work.
Troubleshooting
In case you encounter difficulties with integrating an iframe, please consider the following:
General advice
- Ensure that the URL used within data-src is accurate and points to the intended content.
- We strongly recommend embedding only one iframe per page. Each iframe requires loading time, and this is particularly important to consider if your end users may have slower internet connections, such as on mobile devices.
- In general, make sure you have stable internet connection. Web browsers prioritize loading your website before proceeding to load the content within each iframe. If your internet connection is slow, it may take some time for the iframe’s content becomes visible.
Usage of iframe-support.js
Ensure that the iframe-support.js file is integrated only once per page and not (and not integrated at all, if you are using a fixed height).
Ideally, place the iframe-support.js file within the <head> section of your page. Alternatively, you can insert it just below the last embedded iframe, but be aware that this may result in longer loading times.
❗ Note: The 'class="bryter-module"' attribute is mandatory for the Iframe-resizer to function correctly.
❗ Note: The 'id' attribute must contain unique values for each iframe, such as 'module-1' for the first iframe and 'module-2' for the second iframe, to ensure proper functionality.
❗ Note: Setting 'scrolling="no"' is required for the Iframe-resizer to work.
Example integration
We have created a sample page that embeds multiple iframes. You can review the source code on this page to identify potential issues and compare it with your website.