How to embed Google Docs

Posted 3 years, 6 months ago by junijwi

Hello! This is a short guide on how to embed google docs into toyhou.se! Why would you want to do this? It's because if you edit the google doc, it will automatically update wherever it is embedded (though it sometimes takes up to five minutes to refresh). This can be an easy way to include easily editable, nicely formatted content for someone who isn't code savvy.

You can also embed google sheets, and even more excitingly, google FORMS!!

I'll also leave some sample code at the bottom that you're free to use. Just copy paste your embed URL into the iframe src="[url]" in the code and you're all set!

First, get your doc and publish to the web

unknown.png

unknown.png

unknown.png

You may notice that if you use this code, it appears smushed...

unknown.png

unknown.png

This is easily fixed! You'll want to add the following:

unknown.png

Yeah!! If there's some weird huge amount of space inside the display, you can fix that by adjusting the margins in the google doc itself. Remember that it can take up to 5 minutes for changes to show up in the embed. Also, embedded docs do NOT show page breaks! Beautiful!

There's a bit more you can do with styling... Here's an example!


<div class="container my-4" style="height: 600px; max-width: 800px;">
<iframe src="PASTE EMBED URL HERE" frameborder="0" border="0" cellspacing="0" style="height: 100%; width: 100%; border-radius: 3%; background-color: #FFFFFF; box-shadow: 0px 0px 3px black;"></iframe>
</div> <!-- DO NOT FORGET TO CHANGE THE BACKGROUND COLOR TO THE SAME COLOR AS YOUR DOC! -->

Comments


No comments found.