Skip to main content

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>

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

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.

I have this issue as well. Any solve?

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.

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>

 

Reply


Terms & Conditions