¶ Embedded UCP
In this document you can find the step-by-step explanation of how you can load a embedded version of UCP from your website.
¶ The powerful iframe HTML tag!
The most easily way to load UCP from your site is by using an iframe HTML tag. Lets go to the explanation of how to use this powerful HTML tag in your site to load the application.
Lets use the following vocabulary to talk about your website and UCP
- web2: The URL of the website that you want to load UCP from
- web1: The URL of UCP website (Ex: https://qvoice.ca/ucp/login)
¶ Insert the iframe HTML tag in your website (web2)
In the HTML document of your website (web2) or inside your component if you are working with React you should insert the following:
<iframe title='ucp' src='{web1}' allow='notifications; microphone' />
Lets talk about the attributes of the iframe
- title: This is the title of your iframe, we suggest to use ucp to easily recognize it
- src: This is the source of the content of the iframe, in other terms it is the URL of the website that you want to load, in this case we are talking about web1 (URL of UCP website)
Important: Always use the URL of UCP with the /login path at the end, otherwise the content of UCP will not be loaded successfully
Incorrect usage: https://qvoice.ca/ucp
Correct usage: https://qvoice.ca/ucp/login
- allow: This is a list of permissions splited by ; that you grant to the embedded website. UCP uses two of them, notifications in order to have the ability to push notifications and microphone in order to access the audio input that will be used during your calls
Important: If you do not want to grant these two permissions to UCP you should take into account that incoming and outgoing calls are not going to work
Finally you should see UCP embedded inside your website, for sure you can customise the styles of the iframe.
Important: We strongly suggest to use a minimum size of 300 pixels x 300 pixels in order to give the UI enough space to normally display the elements
Enjoy Embedded UCP in your website!