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:
- Part 1: Setting up your Awesome Table
- Part 2: Creating a filterable Senator list with pictures
- Part 3: Mapping user submitted data with Google Forms
- Part 4: Sharing and embedding your Awesome Table
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.
<!-- 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:
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 email@example.com or drop them in the comments.