All Collections
Template Content
Embedding iframe Content on Quotes
Embedding iframe Content on Quotes

Embed Google Docs, Sheets and Slides as well as YouTube, Canva, Vimeo, or Loom content on your Quote Templates and Quotes.

Ash Welsh avatar
Written by Ash Welsh
Updated over a week ago

You can embed content generated by third-party tools onto your Quotes.
​
​Important Notes and Limitations:

  1. Embedded iframes will not show on PDFs. If you are sending Quotes via PDF or are configured to automatically send accepted Quotes to your Customers, the area that the iframe takes up will show as blank white-space on the PDF.

  2. Do NOT use iframed content for terms and conditions or any legal clauses. Changing content in the 3rd-party application will affect the web versions of any active or signed Quotes.

  3. MailMerge tokens from Quoter (e.g., customer name, email, etc.) are not supported within iframed content.

  4. In many cases, embedded iframes are not responsive. Test your designs on Quotes in webview at different screen widths and make sure you are happy with the results before sending Quotes with iframes.

  5. Many iframes includes hover controls, such as an ellipsis menu or page navigation controls. These may create a undesired customer experience. Test your designs on Quotes in webview and make sure you are happy with the results before sending Quotes with iframes.

YouTube

  1. Access the video on YouTube and click Share
    ​

  2. Select Embed
    ​

  3. Copy the embed code
    ​

  4. In Quoter, click Source then paste the copied embed code into the content editor area
    ​

  5. Remove the frameborder and title parts of the embed code
    ​

  6. It should look like this:
    ​

  7. Publish the Quote and you'll see the embedded video in webview:
    ​

Vimeo

  1. Access the Vimeo video you want to embed and click Share

  2. Click the embed code icon
    ​

  3. Copy the embed code

  4. In Quoter, click Source then paste the copied embed code into the content editor area

  5. Remove everything except the iframe tag.

  6. A valid iframe tag should look something like:
    <iframe frameborder="0" height="360" src="https://player.vimeo.com/video/783455878?h=46672b3b96&amp;title=0&amp;byline=0&amp;portrait=0" width="640"></iframe>

  7. Add a p tag as below to center the video
    <p style="text-align:center"><iframe frameborder="0" height="360" src="https://player.vimeo.com/video/783455878?h=46672b3b96&amp;title=0&amp;byline=0&amp;portrait=0" width="640"></iframe></p>

Canva

Pro Tip: When you save a Canva design that is embedded in a Quote or Quote Template, the updates will automatically be applied in Quoter.
​

See what you can do: https://www.loom.com/share/0c03973751cd4e92a1960df32d87fa6e

  1. Create a single or multi-page proposal, or other content, in Canva (Letter page size is recommended).
    ​

  2. Click Share, then More
    ​

  3. Click Embed
    ​

  4. Copy the HTML embed code
    ​

  5. In Quoter, click Source then paste the copied embed code into the content editor area

  6. Remove the div tag, the a href tag, and adjust the iframe tag as per the image below (remove everything in red). Set the height to "1100px".
    ​

  7. Your iframe tag should look something like this:
    <p><iframe src="https://www.canva.com/design/DAFd3VN_t1c/view?embed" style="border:none; height:1100px; margin:0; padding:0; width:100%"></iframe></p>
    ​

Loom

  1. Access the video in your Loom library.

  2. Click Share, then Embed, and then select Fixed size (generally a width of 800px looks good).
    ​

  3. Click Copy embed code

  4. In Quoter, click Source then paste the copied embed code into the content editor area

  5. Remove this code from the iframe tag:
    frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen

  6. A valid iframe tag will look something like:
    <iframe height="467" src="https://www.loom.com/embed/0c03973751cd4e92a1960df32d87fa6e" width="800"></iframe>

  7. Add a p tag as below if you want to center the video, and a valid
    <p style="text-align:center"><iframe height="467" src="https://www.loom.com/embed/0c03973751cd4e92a1960df32d87fa6e" width="800"></iframe></p>

Google Docs, Sheets and Slides

  1. Click File, Share, then Publish to Web
    ​

  2. Click Embed, then Publish and copy the embed code
    ​

  3. In Quoter, click Source then paste the copied embed code into the content editor area

  4. You may need to adjust the width to 100% and set a fixed height that looks good when you preview the Quote or Quote Template.

Did this answer your question?