I’m attempting to find the best way to add a Canva project to my elearning course. While I realize I can link this and have the user travel out of the course shell, I’d prefer for them to watch the content within the player. I’ve attempted using an iframe, however, I’m having trouble with Canva connecting. I did ensure that Canva was on the safe iframe list as well. I’ve tried using the embed code as an html asset as well as the iframe widget at the bottom (the latter really not being ideal). Neither work. Any guidance would be great!
Page 1 / 1
Hi Ryan - Thanks for the question.
Below are the steps to building HTML page in Docebo using Canva:
1. Go to Advanced Settings -> E-learning -> IFrame Allow list and add the below two urls to the list.
2. Go to the course where you want to add the HTML page. Click on the 'Training Material' tab -> click on '+ADD TRAINING MATERIAL' drop down -> select 'HTML Page'.
Adding HTML Page
3. Add course 'Title'.
4. Click on '<>' source code button from the Description section. In the 'Source Code' window, insert the embed code from Canva.
5. Click on 'Ok'. Then click on 'Save Changes'. You will get a prompt "The operation has been completed successfully".
Click on Learner View to check if the code is working properly.
Learner View of Canva Content in Docebo HTML Page
Good Morning Community,
I’m attempting to find the best way to add a Canva project to my elearning course. While I realize I can link this and have the user travel out of the course shell, I’d prefer for them to watch the content within the player. I’ve attempted using an iframe, however, I’m having trouble with Canva connecting. I did ensure that Canva was on the safe iframe list as well. I’ve tried using the embed code as an html asset as well as the iframe widget at the bottom (the latter really not being ideal). Neither work. Any guidance would be great!
Any chance you can put a screenshot or describe what you are seeing when you save? Is it just blank, is there an error, something else? Also, what about a sample of the embed code you are trying to use?
@Bfarkas likely a white screen or “refused to connect” browser image in the pane.
Srishti is coming back around to make some updates in the screen shots she posted, but in the meantime this below worked OK for me.
I did have to use some Player CSS to target the “container1” and remove the scroll bar.
Ah yeah, the ol’ iframe height/width 100% issue. Either need to remove the surrounding div contianer and switch the height to a definied height like 500px, or set the container1 around it to fill the space so the height and width fill properly.
Thanks Team...I was able to get this to work. I was able to take Srishti’s guidance, but I will clarify one step that was still creating a hiccup.
I’m going to copy only what you see circled in red:
Paste that so that you now have this: <p><iframe src="https://www.canva.com/design/DAFOOjt4J28/Hf2ZCcZSYN_RvEW34Xmssw/view?embed" width="100%" height="100%"></iframe></p>
Click save and then look at the learner view
Success! Give yourself a high-five if you feel so inclined.
Nice job, @RyanBerardi! Looks amazing, high fives all around!
So in this case, it’s the Share > Smart Embed link from Canva basically, and not the “HTML” one.
I believe Docebo’s HTML editor is sanitizing the HTML, restructuring it, and in the process breaking the source link. Glad you got it working and shared for others who may need to do the same!
