Embedding the iFrame #
To load the landing page on your website, use the following iframe code sample. This example includes an ID token for user authentication, which should be replaced with a valid token.
<iframe id="emed-partner-landing" src="https://embed-uk.preprod.babylontech.co.uk/partners#id_token=CHANGE_ME" frameborder="0" allowfullscreen="1" scrolling="auto" allow="camera *; microphone *"></iframe>
- id unique identifier for the iframe to facilitate CSS styling or JavaScript manipulation. We recommend that you keep to the ID provided by eMed.
- src the URL of the booking journey, including the ID token for authenticating the user session. Replace CHANGE_ME with the actual ID token generated by your backend service.
- frameborder controls the iframe border. A value of “0” removes the border for a seamless look.
- allowfullscreen enables full-screen mode for the iframe content, improving user experience on devices that support fullscreen.
- scrolling allows scrolling within the iframe. Set to “auto” to enable scrolling only when necessary.
- allow specifies permissions for the iframe, such as access to the user’s camera and microphone, which are essential for video consultations.
For optimal user experience, ensure the iframe size adjusts to fit the user’s screen by wrapping the iframe in a <div> element with responsive styling:
<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
<iframe id="emed-partner-landing" src="https://embed-uk.preprod.babylontech.co.uk/partners#id_token=CHANGE_ME" frameborder="0" allowfullscreen="1" scrolling="auto" allow="camera *; microphone *" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe>
</div>
This setup uses percentage padding to control aspect ratio, allowing the iframe content to maintain its proportions while adjusting to different screen sizes.