Home » Blog » Intro to Awesome Tables 4: Sharing and Embedding

Intro to Awesome Tables 4: Sharing and Embedding

In this tutorial you’ll learn how to take the Awesome Table from we created in Part 2 and embed it on a WordPress website. Of course this will work with any Awesome Table, no matter what.

This part 4 of a four part series where we learn about Awesome Tables:

Share your spreadsheet

First off, be sure that that the spreadsheet sharing settings are correct. On your spreadsheet go to File > Share… (or click the blue share button in the top right).

Make sure the settings are configured how you’d like them. The Awesome Table will display to anyone with permissions to see the spreadsheet. So you can keep it private and share it with only a select group or with the whole world.

Sharing the Awesome Table

Go back to your Awesome Table view and open sharing settings on the Awesome Table View (3 dots with lines icon)

You can either share the link or you can embed it on a website.

Embedding

Click the Embed tab on the sharing box. There are two methods used to embed, the javascript method and the iframe. Javascript will be much more flexible and act better on your website, however if you aren’t able to add javascript to your page you can probably use the iframe method.

I want to add this table to my WordPress blog so I copy the javascript code.

<!-- Place this tag where you want the Awesome Table Widget to render -->
<div data-type="AwesomeTableView" data-viewID="-KgHnuGg9ixvXdTrFewR"></div>

<!-- Place this tag in your head or just before your close body tag. -->
<script src="https://awesome-table.com/AwesomeTableInclude.js"></script>

Note: you only have to put that <script> tag on your page once even if you add more than one table to your page.

In WordPress I navigate to the page I wish to edit and make sure that I switch to the text tab so that I can paste in HTML. From there I drop in my Awesome Table embed code and publish the page.

That’s it! Now when I update my Awesome Table it will also update on my website. Though this example was for WordPress, it would work much the same on many other platforms as long as you can put HTML into your editor.

And here it is live:


Conclusion

Wow we’ve covered a lot! You’ve learned how to create and link Google Spreadsheets to Awesome Table views in Part 1: Setting up your Awesome Table. Then we learned how to configure and create templates in Part 2: Creating a filterable Senator list with pictures. After that we really went wild with mapping user submitted data in Part 3: Mapping user submitted data with Google Forms. Finally we put it all together and embedded it on your site in this post.

I hope you’ve learned a lot. Please send examples of your work or questions to drew@goodgoodwork.io or drop them in the comments.

 

3 comments

  1. Colton Cheng says:

    Hi Drew,
    Thank you for you awesome tool! It works great for me. However, I have one concern. I am wondering we can show result upon filter results only, and the other results wont be seen. Thank you!

    • drew says:

      I don’t think you can automatically show filtered results when you embed. There is a way to get a filtered URL by clicking the three dots at the top right. When I filter by states (on the example on this page) and grab the URL it appears to add a URL query string of `?filterD=Alabama` but I don’t see a way to add that query to the embed…

      I suggest asking this question in the Awesome Tables Google+ Community

  2. JoJo B. says:

    Hi,
    Is there a way to preserve the original cell fill colors, or modify them from within awesome tables? There are also other format issues that would be nice to address, such as merged cells and fixed column widths.

    Thanks

Leave a Reply

Your email address will not be published. Required fields are marked *