Skip to main content
Solved

Canva HTML export problem

  • January 20, 2021
  • 5 replies
  • 6779 views

Forum|alt.badge.img+2

Hello, I’m trying to export HTML template from Canva into Klaviyo (Email Template) I’m able to copy the code from Canva and paste it into Klaviyo along with the unsubscribe tag. I end up with a total of 17 lines and am able to see the preview with no problem. The problem comes in after I save, exit out, and try to preview again. I view the code in Klaviyo and it has 14 lines instead of 17.

Can anyone help in this matter? I can 

 

(17)

<html>
  <body>
    <p>
<div style="position: relative; width: 100%; height: 0; padding-top: 141.4286%;
 padding-bottom: 48px; box-shadow: 0 2px 8px 0 rgba(63,69,81,0.16); margin-top: 1.6em; margin-bottom: 0.9em; overflow: hidden;
 border-radius: 8px; will-change: transform;">
  <iframe style="position: absolute; width: 100%; height: 100%; top: 0; left: 0; border: none; padding: 0;margin: 0;"
    src="https:/&#x2F;www.canva.com&#x2F;design&#x2F;DAETyVyeYM0&#x2F;view?embed">
  </iframe>
</div>
<a href="https:&#x2F;&#x2F;www.canva.com&#x2F;design&#x2F;DAETyVyeYM0&#x2F;view?utm_content=DAETyVyeYM0&amp;utm_campaign=designshare&amp;utm_medium=embeds&amp;utm_source=link" target="_blank" rel="noopener">Black Yellow Photo Email Newsletter</a> by theUNOpage
    </p>
    <p>
      footer text here {% unsubscribe %}
    </p>
  </body>
</html>

 

(14) AFTER SAVE

<html>  
  <body>    
    <p>      
    </p>
    <div style="position: relative; width: 100%; height: 0; padding-top: 141.4286%;
 padding-bottom: 48px; box-shadow: 0 2px 8px 0 rgba(63,69,81,0.16); margin-top: 1.6em; margin-bottom: 0.9em; overflow: hidden;
 border-radius: 8px; will-change: transform;">      
    </div>
    <a href="https://www.canva.com/design/DAETyVyeYM0/view?utm_content=DAETyVyeYM0&amp;utm_campaign=designshare&amp;utm_medium=embeds&amp;utm_source=link" rel="noopener" target="_blank">Black Yellow Photo Email Newsletter</a> by theUNOpage
    <p>
      footer text here {% unsubscribe %}
    </p>
  </body>
</html>

Best answer by Dov

Hi @theunopage,

Thank you for sharing this information with the Klaviyo Community.

Most email clients don’t allow embedding iframes and other modern HTML features for security reasons or haven’t implemented support yet. Because they’re not supported well, we strip out <iframe> elements when you’re building an email so your recipients don’t get an email with less than what you expected.

It’s probably best to create a button and link out to the page you want, e.g. a Facebook group page. If you want to create more of a visual, you could take a screenshot of the webpage and then link the image to the live page.

Thanks and have a great day.

View original
Did this topic or the replies in the thread help you find an answer to your question?

5 replies

Omar
Partner - Platinum
Forum|alt.badge.img+46
  • 2025 Champion
  • 494 replies
  • January 21, 2021

@theunopage The difference I'm seeing is that Klaviyo has changed the codings to normal readable formats so &#x2F; turns into /

This should not effect your email so it's ok.

Or are you experiencing some other issue?


Forum|alt.badge.img+2
  • Author
  • Contributor I
  • 1 reply
  • January 21, 2021

Thank you very much for your reply. Sorry for not mentioning that when the code has (17) lines I can preview the email template as it should be. However, when is goes to 14 lines the email template is blank.


Forum|alt.badge.img+1
  • New Member
  • 1 reply
  • March 8, 2021

I have this issue as well. Any solve?


Dov
Forum|alt.badge.img+61
  • Klaviyo Alum
  • 1493 replies
  • Answer
  • April 7, 2021

Hi @theunopage,

Thank you for sharing this information with the Klaviyo Community.

Most email clients don’t allow embedding iframes and other modern HTML features for security reasons or haven’t implemented support yet. Because they’re not supported well, we strip out <iframe> elements when you’re building an email so your recipients don’t get an email with less than what you expected.

It’s probably best to create a button and link out to the page you want, e.g. a Facebook group page. If you want to create more of a visual, you could take a screenshot of the webpage and then link the image to the live page.

Thanks and have a great day.


Forum|alt.badge.img+3
  • Contributor I
  • 5 replies
  • February 17, 2024

I have made this email in photoshop and exported with web legacy to html and it look great but left justified and I cant get it centered for the life of me. anyone have any suggestions?

 

<html>  
  <head>    
    <title>
      test2024RedDress
    </title>
<!-- Save for Web Slices (test2024RedDress.psd - Slices: 03, 08, 09, 10, 12, 15, 16, 17, 18, 20, 2024RedDress_24, 21, 22, 23, 25, 26, 28, 29, 30, 31, 33, clothing, jewewlry, new, shipping) -->
  </head>
  <body>    
    <center>      
      <div style="position:auto; left:0px; top:0px; width:1000px; height:5371px;">        
        <div style="position:auto; left:1px; top:0px; width:999px; height:95px;">          <a href="https://www.reddress.com/" target="_blank">
            <img alt="" border="0" height="95" src="https://d3k81ch9hvuctc.cloudfront.net/company/UCS8QE/images/images_shipping7a0fa.png" width="999"/></a>
        </div>
        <div style="position:center; left:1px; top:95px; width:999px; height:29px;">          
          <img alt="" height="29" src="https://d3k81ch9hvuctc.cloudfront.net/company/UCS8QE/images/images_test2024RedDress_03a91f0.jpg" width="999"/>
        </div>
        <div style="position:auto; left:1px; top:124px; width:73px; height:40px;">          
          <img alt="" height="40" src="https://d3k81ch9hvuctc.cloudfront.net/company/UCS8QE/images/images_test2024RedDress_0421591.jpg" width="73"/>
        </div>
        <div style="position:absolute; left:74px; top:124px; width:188px; height:41px;">          
          <img alt="" height="41" src="https://d3k81ch9hvuctc.cloudfront.net/company/UCS8QE/images/images_new46da0.jpg" width="188"/>
        </div>
        <div style="position:absolute; left:262px; top:124px; width:152px; height:41px;">          
          <img alt="" height="41" src="https://d3k81ch9hvuctc.cloudfront.net/company/UCS8QE/images/images_clothing41b38.jpg" width="152"/>
        </div>
        <div style="position:absolute; left:414px; top:124px; width:127px; height:41px;">          
          <img alt="" height="41" src="https://d3k81ch9hvuctc.cloudfront.net/company/UCS8QE/images/images_jewewlryf6e45.jpg" width="127"/>
        </div>
        <div style="position:absolute; left:541px; top:124px; width:191px; height:41px;">          
          <img alt="" height="41" src="https://d3k81ch9hvuctc.cloudfront.net/company/UCS8QE/images/images_test2024RedDress_08fd1ff.jpg" width="191"/>
        </div>
        <div style="position:absolute; left:732px; top:124px; width:105px; height:41px;">          
          <img alt="" height="41" src="https://d3k81ch9hvuctc.cloudfront.net/company/UCS8QE/images/images_test2024RedDress_09a531c.jpg" width="105"/>
        </div>
        <div style="position:absolute; left:837px; top:124px; width:87px; height:41px;">          
          <img alt="" height="41" src="https://d3k81ch9hvuctc.cloudfront.net/company/UCS8QE/images/images_test2024RedDress_1043ad.jpg" width="87"/>
        </div>
        <div style="position:absolute; left:924px; top:124px; width:76px; height:40px;">          
          <img alt="" height="40" src="https://d3k81ch9hvuctc.cloudfront.net/company/UCS8QE/images/images_test2024RedDress_113c752.jpg" width="76"/>
        </div>
        <div style="position:absolute; left:1px; top:164px; width:73px; height:1161px;">          
          <img alt="" height="1161" src="https://d3k81ch9hvuctc.cloudfront.net/company/UCS8QE/images/images_test2024RedDress_12d188a.png" width="73"/>
        </div>
        <div style="position:absolute; left:924px; top:164px; width:76px; height:1161px;">          
          <img alt="" height="1161" src="https://d3k81ch9hvuctc.cloudfront.net/company/UCS8QE/images/images_test2024RedDress_132035e.png" width="76"/>
        </div>
        <div style="position:absolute; left:74px; top:165px; width:850px; height:1160px;">          
          <img alt="" height="1160" src="https://d3k81ch9hvuctc.cloudfront.net/company/UCS8QE/images/images_test2024RedDress_14d06e5.png" width="850"/>
        </div>
        <div style="position:absolute; left:1px; top:1325px; width:999px; height:983px;">          
          <img alt="" height="983" src="https://d3k81ch9hvuctc.cloudfront.net/company/UCS8QE/images/images_test2024RedDress_152a7b3.jpg" width="999"/>
        </div>
        <div style="position:absolute; left:0px; top:2308px; width:403px; height:350px;">          
          <img alt="" height="350" src="https://d3k81ch9hvuctc.cloudfront.net/company/UCS8QE/images/images_test2024RedDress_1676b10.jpg" width="403"/>
        </div>
        <div style="position:absolute; left:403px; top:2308px; width:195px; height:350px;">          
          <img alt="" height="350" src="https://d3k81ch9hvuctc.cloudfront.net/company/UCS8QE/images/images_test2024RedDress_17a2530.jpg" width="195"/>
        </div>
        <div style="position:absolute; left:598px; top:2308px; width:402px; height:350px;">          
          <img alt="" height="350" src="https://d3k81ch9hvuctc.cloudfront.net/company/UCS8QE/images/images_test2024RedDress_1866b40.jpg" width="402"/>
        </div>
        <div style="position:absolute; left:1px; top:2658px; width:999px; height:744px;">          
          <img alt="" height="744" src="https://d3k81ch9hvuctc.cloudfront.net/company/UCS8QE/images/images_test2024RedDress_2011bbe.jpg" width="999"/>
        </div>
        <div style="position:absolute; left:0px; top:3402px; width:360px; height:610px;">          
          <img alt="" height="610" src="https://d3k81ch9hvuctc.cloudfront.net/company/UCS8QE/images/images_test2024RedDress_21221d9.jpg" width="360"/>
        </div>
        <div style="position:absolute; left:360px; top:3402px; width:283px; height:610px;">          
          <img alt="" height="610" src="https://d3k81ch9hvuctc.cloudfront.net/company/UCS8QE/images/images_test2024RedDress_22a8c02.jpg" width="283"/>
        </div>
        <div style="position:absolute; left:643px; top:3402px; width:357px; height:610px;">          
          <img alt="" height="610" src="https://d3k81ch9hvuctc.cloudfront.net/company/UCS8QE/images/images_test2024RedDress_2358eff.jpg" width="357"/>
        </div>
        <div style="position:absolute; left:1px; top:4012px; width:999px; height:940px;">          
          <img alt="" height="940" src="https://d3k81ch9hvuctc.cloudfront.net/company/UCS8QE/images/images_test2024RedDress_2569b54.jpg" width="999"/>
        </div>
        <div style="position:absolute; left:0px; top:4952px; width:1000px; height:77px;">          
          <img alt="" height="77" src="https://d3k81ch9hvuctc.cloudfront.net/company/UCS8QE/images/images_test2024RedDress_26e0752.jpg" width="1000"/>
        </div>
        <div style="position:absolute; left:0px; top:5029px; width:1px; height:173px;">          
          <img alt="" height="173" src="https://d3k81ch9hvuctc.cloudfront.net/company/UCS8QE/images/images_test2024RedDress_27fc5f.jpg" width="1"/>
        </div>
        <div style="position:absolute; left:1px; top:5029px; width:423px; height:77px;">          
          <img alt="" height="77" src="https://d3k81ch9hvuctc.cloudfront.net/company/UCS8QE/images/images_test2024RedDress_282399a.jpg" width="423"/>
        </div>
        <div style="position:absolute; left:424px; top:5029px; width:74px; height:77px;">          
          <img alt="" height="77" src="https://d3k81ch9hvuctc.cloudfront.net/company/UCS8QE/images/images_test2024RedDress_29eaf3a.jpg" width="74"/>
        </div>
        <div style="position:absolute; left:498px; top:5029px; width:81px; height:77px;">          
          <img alt="" height="77" src="https://d3k81ch9hvuctc.cloudfront.net/company/UCS8QE/images/images_test2024RedDress_3037b88.jpg" width="81"/>
        </div>
        <div style="position:absolute; left:579px; top:5029px; width:421px; height:77px;">          
          <img alt="" height="77" src="https://d3k81ch9hvuctc.cloudfront.net/company/UCS8QE/images/images_test2024RedDress_31527d4.jpg" width="421"/>
        </div>
        <div style="position:absolute; left:1px; top:5106px; width:999px; height:96px;">          
          <img alt="" height="96" src="https://d3k81ch9hvuctc.cloudfront.net/company/UCS8QE/images/images_test2024RedDress_3236044.jpg" width="999"/>
        </div>
        <div style="position:absolute; left:0px; top:5202px; width:1000px; height:32px;">          
          <img alt="" height="32" src="https://d3k81ch9hvuctc.cloudfront.net/company/UCS8QE/images/images_test2024RedDress_33c0fa0.jpg" width="1000"/>
        </div>
        <div style="position:absolute; left:0px; top:5234px; width:1000px; height:43px;">          
          <img alt="{% unsubscribe %}" height="43" src="https://d3k81ch9hvuctc.cloudfront.net/company/UCS8QE/images/images_2024RedDress_24cd75.jpg" width="1000"/>
        </div>
        <div style="position:absolute; left:0px; top:5277px; width:1000px; height:94px;">          
          <img alt="" height="94" src="https://d3k81ch9hvuctc.cloudfront.net/company/UCS8QE/images/images_test2024RedDress_357693e.jpg" width="1000"/>
        </div>
      </div>
<!-- End Save for Web Slices -->
    </center>
  </body>
</html>