Tips and tricks to generate content with ChatGPT for Google Docs
Ever faced the blank page problem ? ChatGPT can help you get started and put down your ideas in a structured manner for free.
This post will show prompting techniques to appropriately format the AI response for Google Docs and personalize the content to your doc2.site project. If you’re unfamiliar with ChatGPT and prompting, we recommend first reading AI + you: How to use ChatGPT for content creation.
Semantics#
Google Docs supports copied and pasted HTML content and automatically transforms it into semantically correct content. This helps differentiate elements like headings and paragraphs and also load images and generate doc2 components. Semantics are important not only in Google Docs but also on the Web to convey the meaning of our content.
Knowing that, we can force responses to only allow certain elements that are supported by Google Docs and our doc2.site project. We can prompt ChatGPT to respond in HTML format with the common text semantics: paragraphs, headings, lists, bold, italic etc. In addition, we can specify other elements to complement the text, like links and images. If our doc2.site project supports components, we can also indicate how to construct them using tables and explain their semantics in order to generate them only when it makes sense.
Here’s a prompt example to use specific HTML elements when asked to respond in HTML:
When asked to respond in HTML use these HTML tags: <p>, <img>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <strong>, <em>, <a>, <ul>, <ol>, <li>.
Images#
Unfortunately, if ChatGPT is not configured to generate images with Dall-E, it will most often respond with something similar to:
I'm sorry, but I'm a text-based AI and cannot generate pictures or images. My capabilities are limited to generating text-based responses and providing information and assistance through text.
We can still instruct it to describe the image with specific keywords, which we can use as a query to generate an image with the doc2 Image API. The images are royalty-free images provided by Pixabay.
Here’s a prompt example to force the source of images:
For <img> the "src" value has to be "https://api.doc2.site/v1/images/search?query=QUERY" and replace QUERY with the image intent.
Components#
Components are the concept behind structuring content into smaller, reasonable pieces. Instead of creating simple content structures composed of text and images, you can group pieces of content together to create components that can then be translated by developers into interactive and dynamic sections of the page. Typical examples of components include Hero or Carousel components.
To create a component in Google Docs for your doc2.site project, you need to create a table with the first row having a single cell containing the name of the component. Read more about components in the docs.
For components, it’s important to be as precise as possible by providing component semantics and HTML markup examples.
Here’s a prompt example that explains how to create a Hero component:
You can create custom components by using the HTML tags: <table>, <tr>, <td>. All components: Hero: the key visual element on a page that focuses user attention. The hero's content can be an <img>, <h1> and <p> in that order. There can be multiple <p> and <p> can have <a> as call to action (cta) buttons. Hero HTML example: <table> <tr> <td>Hero</td> </tr> <tr> <td> <img src="image url" alt="image description" /> <h1>Hero title</h1> <p>Hero description</p> <p><a href="cta url 1">cta label 1</a></p> <p><a href="cta url 2">cta label 2</a></p> </td> </tr> </table>
Tip: You can store your complete prompt in Google Drive and upload it to ChatGPT for convenience when starting a conversation. This is only possible using the latest version ChatGPT-4o which is integrated with Google Drive.
Templates#
If your project supports page templates, you can indicate the page template structure and semantics similar to components. To specify a template, a meta component needs to be created with the template name.
Here’s a prompt example that explains how to create a post page template:
Meta: holds page metadata like title, description, keywords for SEO purposes. Optionally a template can be specified when requested. Meta HTML examples: Example 1 with SEO title, description and keywords: <table> <tr> <td colspan=”2”>Meta</td> </tr> <tr> <td>title</td> <td>Exploring the Beauty of Mauritius</td> </tr> <tr> <td>title</td> <td>Mauritius, a small island nation in the Indian Ocean, is a paradise renowned for its stunning beaches, lush greenery, and rich cultural heritage. The island offers a diverse range of experiences for visitors, from relaxing on its pristine beaches to exploring its vibrant markets and historical sites.</td> </tr> <tr> <td>keywords</td> <td>Mauritius, Indian Ocean, Island, Relaxing, Beach, Paradise</td> </tr> </table> Example 2 with a “post” template: <table> <tr> <td colspan=”2”>Meta</td> </tr> <tr> <td>template</td> <td>post</td> </tr> </table> A “post” template always starts with <h1> followed by <p> then <img>.
Our browser extension#
The doc2.site Browser Extension includes tools that add new actions to Google Drive, Docs and Sheets to preview and publish content. It also adds a handy “copy as HTML” button on https://chatgpt.com.
When prompting ChatGPT to write content, you can ask it to return a non-formatted and a HTML-formatted result by following the instructions we listed above. The non-formatted response will be in markdown, which is much easier to read than the HTML response. Of course it is always recommended to check the response for mistakes.
You can then simply copy the HTML-formatted response by clicking on the doc2.site logo next to the copy code button. Now the content can be pasted in Google Docs and will hold semantically correct elements. Any styling is stripped off, as styles are not handled in the document but in the doc2.site project codebase instead.
Congrats ! The AI-generated content can now be previewed and published to the Web with doc2.site for free.