Skip to main content
T
Contributor I
theunopage
Contributor I
January 20, 2021
Solved

Canva HTML export problem

  • January 20, 2021
  • 5 replies
  • 7055 views

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>

      This topic has been closed for replies.
      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.

      5 replies

      Omar
      Partner - Platinum
      Omar
      2025 Champion
      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?

      Helping E-commerce brands maximize Lifetime Value & Profits with Klaviyo, CRO & CVO - Get your free Audit - https://link.polarisgrowth.com/free-audit
      T
      Contributor I
      theunopageAuthor
      Contributor I
      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.

      A
      Adele
      New Member
      March 8, 2021

      I have this issue as well. Any solve?

      Lola
      Dov
      DovAnswer
      Klaviyo Alum
      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.

      DD
      A
      Contributor I
      Alvarez007
      Contributor I
      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>

       

      Terms & ConditionsAccessibility statement

      Links & Resources

      Platforms

      Partners

      Useful Things

      About

      • Terms and Privacy |
        © 2026 Klaviyo All rights reserved. Klaviyo and the Klaviyo logo are trademarks or registered trademarks of Klaviyo, Inc. or its affiliates.