These days, building things on the internet is fast. You can buy a domain, create a website, and deploy it all in one day. I love internet magic as much as the next person, but sometimes I think, “how can that be possible?” I used to wait days for DNS records to travel continents and oceans and become a part of top-level domains.
As a developer advocate at Grammarly, I spend a large portion of my work week creating and maintaining pages across the Grammarly for Developers docs site. Within our docs, one thing we often say is that adding the SDK to your app is fast, that adding the SDK to applications only takes a few minutes. So, naturally, I needed to see if this was true. Is adding the SDK to an application actually fast? Could I actually do it in a few minutes, especially as someone new to the team?
In this article I’ll explain how you can create a Google Site that leverages the Grammarly’s Text Editor SDK. My site is called Grammar Checker—it uses the Free version of the SDK and has many different pages you can explore to check your grammar according to different dialects and writing styles, like academic or business writing.
In the screenshot of the Grammar Checker website above, you can see the text area has the Grammarly Text Editor plugin added to it, with the Grammarly button in the bottom-right corner and suggestion cards appearing in the editor.
Live stream
I demoed Grammar Checker and built a version of it during a live stream. Check out the live stream recording below. Jump to 51:07 to see me race to build the site in three minutes. 🙀🙀🙀
Adding Grammarly’s SDK to a Google Site
If you’re like me, building something is probably more fun than just reading about it, so let’s build the website together. This example is going to be a bit simpler than my website, but it’ll still be functional and it’ll still have the core elements of the Text Editor SDK.
Here’s what we’re going to be building. Like I said earlier, it should only take a few minutes to create the Google Site and add the SDK. For me, I only needed about 7 minutes, as shown in the version history section of the screenshot below.
And here are the steps to follow to create a website that leverages the Text Editor SDK. By the end of this guide, you will have created a new Google Site that has a text area with the Grammarly Text Editor Plugin added to it.
1 On Google Sites, select Start a new site > Blank.
2 On the right sidebar, select Insert > Embed > Embed code.
3
Within the contents of the embed, add a <textarea> tag.
As an example, you can copy/paste the following code. Select Next > Insert to save your changes.
<textarea
style="
display:block;
width:100%;
height:100%;
padding:15px;"
class="input">
Check your grammr here
</textarea>
4
Add the <grammarly-editor-plugin> tag around the <textarea>.
You can either add the tag yourself or fully replace the contents from step 3 with the following code. Select Next > Save to save your changes.
<grammarly-editor-plugin>
<textarea
style="
display:block;
width:100%;
height:100%;
padding:15px;"
class="input">
Check your grammr here
</textarea>
</grammarly-editor-plugin>
5 Go to https://developer.grammarly.com/apps and create a new app.
If you’ve never been here before, you’ll need to register an account. If you have been here before, you’ll need to log in with your developer account. After you’ve logged in, select New app > Create to create a new Web application.
6
Within Clients > Web > HTML, copy the <script> tag.
The <script> tag includes the script and client ID that’s used to authenticate with Grammarly and place the Grammarly button over your <textarea>. Keep this page open. We’re going to return to it very soon!
7 On Google Sites, within the contexts of the embed, add the <script> tag from the previous step to the top line of your <textarea>, then select Next > Save to save your changes.
8
In the Grammarly for Developers App Console, on Clients > Web > HTML, scroll down to find Origins > + Add an origin, then select + Add an origin and enter https://*.googleusercontent.com
Press Save to save the origin onto the allowlist of your app. We’re using a wildcard (*) in the origin because Google changes the origin of your Google Site dynamically.
9 On Google Sites, select Publish, add a web address, then press Publish again to make your site live. To view the published site, select ▼ > View published site.
10 You’re done! The Grammarly button should now appear on your site with free writing help. Select the text box to see the Grammarly button and see the writing suggestions.
Conclusion
Turns out creating a site and adding the SDK was fast and simple. In only a few minutes (7!), I was able to add the Text Editor SDK to a Google Site and publish it for the world to see.
One thing to keep in mind, though: When I was building this site, I wasn’t timing myself. If I was timing myself, I bet I could have created and published the site even faster. Plus, while I was building the website, I was also writing the first draft of the instructions that you’re reading right now, and I did that all in 7 minutes 🙂.
