Modules can basically run anywhere. BRYTER allows you to embed your modules in various places like mobile and desktop websites or apps.
This way, you can make your module widely accessible to your users. On the other hand, if you want to use your module only within your company, you can also embed it in an intranet solution. Given the custom styling of BRYTER’s end-user interface, your module will integrate perfectly with your platform. You can also publish multiple modules on your website or intranet solution.
Examples
A BRYTER module embedded on a website
A BRYTER module embedded on a Sharepoint intranet
How to embed a BRYTER module
Using IFrame technology, you are able to embed BRYTER modules with some customization options. IFrames, so-called “inline frames,” put your BRYTER module in an invisible frame and pastes it on your website.
The IFrame is a live connection, so you can modify the content of your module even after you've published and embedded it. Simply publish the new changes with one click when you are ready - you won't need to update your website at all. If your website runs on a content management system like WordPress, Drupal, or Typo3 and you have the rights to edit pages, you can embed your module using their integrated WYSIWYG editors. If your website is a static HTML page, you will need a text editor which can read 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 WYSIWYG to HTML mode and paste the code. If you are using a static HTML page, open it with a text editor, and paste the code between your content.
3. Add your module link
In the attribute “data-src”, replace the dummy link with your module's URL. Make sure to leave the quotation marks as is. Learn how to access your module's shareable URL.
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
If you use multiple modules on one page, the script must be inserted in the head of your website. In case of a static HTML page, just cut and paste it to the <head>…</head> section. In case of a content management system, you have to look up the customization settings.
Keep in mind that you need to have a custom attribute for each “id,” such as "bryter-module-1" in the example above. If you use multiple modules, always use a different name. For instance, if we name the first module "bryter-module-1," maybe we want to name the second module "bryter-module-2".
Iframe-support.js automatically scrolls to the top of the page every time a question is answered. This ensures that your user always starts reading from the top.
Use an iframe with a fixed height
The configuration above shows how to embed an IFrame with a variable height. That means the IFrame will adjust the height depending on its content. To use an IFrame with a fixed height, just remove everything you entered in the example from above and use the following code snippet:
<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
If embedded in an iframe, the BRYTER module is able to send a post message (sessionFinished) which can be received by the parent site through an event listener. The post message gets sent as soon as the session has been successfully completed and can trigger further actions, e.g. closing the iFrame.
To enable this functionality, use the following code snippet in the parent HTML <head> section and implement your further actions by replacing "Implement logic here":
<script>
function bryterModuleEventListener(event) {
if (event.data.type === 'bryter:module' && event.data.action === 'sessionFinished') {
// Implement logic here
}
} window.addEventListener('message', bryterModuleEventListener)
</script>
Additional options
You can configure the settings of your module by appending additional parameters to the end of your link. Append a “?” with the name of the parameter and the attribute to the end of your link like this: “?lang=de” These settings allow for the following module changes:
Change the language of a module
You can change the language of the buttons of a module from English to German by appending the following parameter:
?lang=de
For example, your link should look like this:
https://app.bryter.io/s/Mr9qWq9KSiOq72GSe3nNJw/iframe-test?lang=de
Set a custom distance between the top of your website to your module
Static
In some cases, the automatic scrolling leads to unwanted results, such as if your site has a fluid header that lies on top of the content. In these cases, you may want to define specific padding to indicate that the IFrame should be shown that many px from the top. You can do this by appending the following:
?paddingTop=100
For example, this will lead to padding of 100px from the top:
https://app.bryter.io/s/Mr9qWq9KSiOq72GSe3nNJw/iframe-test?paddingTop=100
Dynamic
In some cases, an automatic scrolling leads to unwanted results, such as if your site has a fixed header that lies on top of the content and its height can be changed dynamically (e.g. header height can expand on smaller screens). In these cases, it is not enough just to define specific padding. But you can use a special date-header attribute on your iframe tag. This attribute should have a value of any valid CSS selector that allows selecting your header.
So let’s 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 don’t 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 don’t allow embedding script tags. You still can embed your BRYTER module but some additional functionality like automatic scrolling will not work.
Troubleshooting
In case you experience issues with integrating an IFrame, please note the following:
General advice
Make sure the URL that you use within data-src is correct.
We strongly advise that you only embed one IFrame per page, since every IFrame takes time to load. This is especially important if your users might have slow internet connections (e.g. on mobile phones).
In general, make sure you have a proper internet connection. Web browsers will always load your website first, then continue with loading the content of each IFrame. If you have a slow internet connection, it might take some time before the IFrame’s content is visible.
Usage of iframe-support.js
Make sure the iframe-support.js file is only integrated once per page and not multiple times (or not at all, if you use a fixed height).
Ideally, integrate the iframe-support.js file in the <head> area. You can also paste it right below the last embedded IFrame, but this might lead to longer loading times.
Please note that class="bryter-module" is mandatory for the IFrame-resizer to work.
Please note that the content of the id field must be unique for the IFrame-resizer to work, e.g. module-1 for the first iframe, module-2 for the second iframe.
Please note that scrolling="no" is mandatory for the IFrame-resizer to work.
Example integration
We have built an example page that embeds multiple IFrames. Feel free to compare this source code with your website to identify potential issues.
How to embed a module in Sharepoint
You can also embed modules in Sharepoint using the Sharepoint Embed web part (more information provided by Microsoft Support here). The embed code you are inserting into the Website address or embed code box could look as follows:
<iframe id="bryter-module-1" class="bryter-module" src="{url_of_bryter_module}" width="100%" height="70%" scrolling="yes" frameborder="0"></iframe>
Keep in mind that the URL of the BRYTER tenant which is hosting your module needs to be whitelisted in Sharepoint. Your Sharepoint admin should add the tenant's URL (e.g., customer.bryter.io) to the Site Settings > HTML Field Security to allow inserting iframes from this domain (more information here):
