Skip to main content
Best Answer

Adding Canva Project

  • September 26, 2022
  • 6 replies
  • 350 views
RyanBerardi
Influencer I
Forum|alt.badge.img

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!

Best answer by srishti.arya

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.
 
IFrame Allow 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.
Edit the code to look like this: 
<p><iframe src="CanvaURL"></iframe>
 
For example:
<p><iframe src="https://www.canva.com/design/DAEGHQEUel8/view?embed" width="100%" height="100%"></iframe></p>
 
Copy HTML 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

 

View original
Adam Ballhaussen
John
martiniwinski
11 people like this
  • Adam Ballhaussen
    Adam Ballhaussen
  • John
    John
  • martiniwinski
    martiniwinski
  • Bfarkas
    Bfarkas
  • thaldane
    thaldane
  • J
    jonty
  • M
    maria.campos
  • K
    kcanderson
  • A
    anagilp
  • S
    sutanu
  • N
    NikkiCBAMSI
Did this post help you find an answer to your question?

6 replies

srishti.arya
Docebian
  • srishti.arya
  • Docebian
  • 2 replies
  • Answer
  • October 21, 2022
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.
 
IFrame Allow 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.
Edit the code to look like this: 
<p><iframe src="CanvaURL"></iframe>
 
For example:
<p><iframe src="https://www.canva.com/design/DAEGHQEUel8/view?embed" width="100%" height="100%"></iframe></p>
 
Copy HTML 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

 

John
J
2 people like this
  • John
    John
  • J
    jonathan.hill
Bfarkas
Hero III
Forum|alt.badge.img+5
  • Bfarkas
  • Hero III
  • 3582 replies
  • October 21, 2022
RyanBerardi wrote:

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?

John
1 person likes this
  • John
    John
John
Docebian
Forum|alt.badge.img+2
  • John
  • Docebian
  • 125 replies
  • October 21, 2022

@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.

<div id="container1"><iframe src="https://www.canva.com/design/DAEGHQEUel8/view?embed" width="100%" height="100%"></iframe></div>
Annarose.Peterson
1 person likes this
  • Annarose.Peterson
    Annarose.Peterson
Bfarkas
Hero III
Forum|alt.badge.img+5
  • Bfarkas
  • Hero III
  • 3582 replies
  • October 21, 2022

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.

John
1 person likes this
  • John
    John
RyanBerardi
Influencer I
Forum|alt.badge.img
  • RyanBerardi
  • Author
  • Influencer I
  • 20 replies
  • October 21, 2022

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.

 

  1. Followed all the steps about the clickjacking
  2. Use this code, but be prepared to replace what I have in red: <p><iframe src="https://www.canva.com/design/DAEGHQEUel8/view?embed" width="100%" height="100%"></iframe></p>
  3. I’m going to copy only what you see circled in red:
  4. 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>
  5. Click save and then look at the learner view
  6. Success!  Give yourself a high-five if you feel so inclined.

     

John
1 person likes this
  • John
    John
John
Docebian
Forum|alt.badge.img+2
  • John
  • Docebian
  • 125 replies
  • October 22, 2022

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!

Reply


Most helpful members this week

Terms & ConditionsCookie settings

Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings