Live captions embedded on your website and therefore directly visible to all users: Thanks to iframe integration, this is no problem. But how does it work? This article will show you how this can be achieved using EVE subtitles and what other customized settings are available to you.
Can we do that?
Anyone who has ever been involved in any way with a company’s Internet presence will have been in this situation at some point: Colleagues have a great idea, already imagined how good it would look on the homepage, and then the evil webmaster comes and destroys the layout dreams of the colleagues: “That’s not possible” or “We can do that, but that’s beyond the budget.”
To do everyone a favor, we would like to show you what you can easily do with EVE on your website. Thanks to iFrame integration, you can embed your event’s live subtitles on a website and customize them according to your ideas for the users. But let’s start from the beginning: what is an inline frame, iframe for short, anyway?
Reduced to its simplest terms: a browser window within a browser window. An iFrame, an HTML element, embeds external content such as advertisements on a website. So, an iFrame is a frame used within a web page to load another “document” within it. This requires an HTML code.
HTML
- Hypertext Markup Language
- Text-based foundation for web pages and the Internet
- readable by machines and thus provides the formatting of texts and other files on websites and throughout the Internet
- So, to add the desired iframe element (e.g., external video, advertisement, live subtitle) to your HTML-based page, you need to add the HTML code to your website.
The best-known example of an iframe integration is probably integrating YouTube videos on a homepage via the “embed” button: this is nothing more than integrating the video on the desired homepage via HTML code. YouTube provides the code for this purpose. This code looks weird at first, but it comprises the various defaults for the inline frame.
If you want to embed live captions as an inline frame on your website, you will need the iframe element as HTML code:
<iframe title=”iframe example” src=”https://app.starteve.ai/listener/iframe-test” width=”900″ height=”500″></iframe>
The iframe code specifies what the content to show is and defines the frame:
| <iframe […..] </iframe> | mandatory start and end of the code; is necessary to be identified as an iframe |
| https://app.starteve.ai/listener/iframe-test | content to be included, in this case, the URL of the listener window for your event configured in your EVE log-in |
| width=”900″ | width of the inline frame |
| height=”500″ | height of the inline frame |
This iframe element will look like this on our homepage:
Other settings that can be integrated into the code are, for example, the alignment or the integration of a scrollbar. EVE also offers further settings for the display within the listener window.
Sometimes embeddings on the website require a specific setting: for example, if you want to adjust the font color of the live captions because it is easier to read them, you can make these adjustments in the Settings in your EVE account.
You can set the font’s color and size, choose a specific style, even color for the border of the font. So you can be creative – but a little advice: it should still be readable. 😉
Under the option “Generate URL Parameters,” you can create an URL that can be attached to the HTML code of the iframe. This way, every user will see the captions according to your specific settings.
Now it shouldn’t be a problem to integrate EVE live captions on your website: you can explain to your webmaster how it’s done and he’ll be thankful that this time he doesn’t have to destroy your website layout dreams. Company peace restored!
If you still have questions or want us to demonstrate how all of this works, feel free to contact us for a demo appointment.