B-Translator is responsive, which means that it is designed to look nice on small screens as well, usually on mobiles. But it also looks nice inside an iFrame as well, so it can easily be embedded inside a webpage.
It can be done by using an url like this as the src of an <iframe> tag:
https://l10n.fs.al/btr/project/LibreOffice/sw/sq?display=iframe
Here is a quick example to demonstrate this. Simply copy and paste this code inside a webpage:
<div style="width:450px; display:inline-block; float:right; border:1px solid #aaa; border-radius: 3px; padding:10px; margin-left: 10px;"> <h3 style="margin-top:0px; color:#2a2; font-size:large">Translations of LibreOffice/sw/sq</h3> <iframe src="https://l10n.fs.al/btr/project/LibreOffice/sw/sq?display=iframe" width="100%" height="500px" seamless="seamless" frameborder="0"> </iframe> </div>
Translations of LibreOffice/sw/sq
Notice ?display=iframe at the end of the URL. This tells the application to customize the output so that it is suitable for an iFrame. It basically includes an extra CSS file which tailors the application by hiding the navbar on the header of the page, removing any margins on the body of the page, etc.
The same thing can be done with vocabularies: https://l10n.fs.al/vocabulary/ICT_sq?display=iframe
, with translations: https://l10n.fs.al/translations?display=iframe
, or with any path of the application that makes sense to be embedded with an iFrame inside another page (for example try this one: https://l10n.example.org/embed-translation-project-inside-webpage?display=iframe).