Sample AI/Tip Sheet

Generate an AI sheet from a particular work

Explanation

Using a combination of GraphQL and Javascript in Google Docs and Apps Script you can populate fields for an AI or tip sheet using Product level fields.

Setting Up the Sidebar in Google Docs:

  • Open a new Google Docs document.

  • Navigate to Extensions > Apps Script.

  • In the Apps Script Editor, click the plus icon (+) next to "Files" to create a new HTML file named 'sidebar'.

  • Use the provided HTML code to create an interactive sidebar. This sidebar, accessible from the main navigation of your document, includes a form for inputting an ISBN, URL, and API key. The sidebar can be customised with CSS.

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
        <!--link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600,300' rel='stylesheet' type='text/css'-->
    <link href='open-sans.css' rel='stylesheet' type='text/css'>
    <style type="text/css">
        * {
            font-family: 'Open Sans';
            font-style: normal;
            font-size: 13px;
        }
        .light { 
            font-weight: 300;
        }
        .regular { 
            font-weight: 400;
        }
        .semibold { 
            font-weight: 600;
        }
    </style>
  </head>
  <body>
    <p>
      Please type in the URL, Key, and ISBN13 that you want, and choose Find.
    <ul>
      <li>URL is usually https://web.consonance.app</li>
      <li>Key will be your API that you get by emailing support@consonance.app</li>
      <li>ISBN is something like 9781905005123</li>
    </ul>
    </p>
    <form id="isbnGetter">
      <p class="semibold">
        <label>Consonance URL</label>
        <br />
        <input type="text" value="https://web.consonance.app" id="url" name="url">
      </p>
      <p class="semibold">
        <label>Key</label>
        <br/>
        <input type="text" value="" id="key" name="key">
      </p>
      <p class="semibold">
        <label>ISBN</label>
        <br/>
        <input type="text" value="" id="isbn13" name="isbn13">
       </p>
      <input type="button" value="Find" onclick="google.script.run.main(isbnGetter)">
    </form>
  </body>
</html>

Creating the Main Script:

  • In the Script Editor, select Code.gs from the file section.

  • Copy and paste the provided JavaScript code into this file. This code includes functions for opening the sidebar, sending GraphQL queries, and populating your Google Doc with the fetched data.

  • Replace placeholders like YOUR_API_KEY with actual values provided by Consonance support.

Using the Sidebar:

  • Back in your Google Docs document, a new menu item "Consonance" should appear.

  • Click on it and select "Show sidebar" to open the newly created sidebar.

  • Enter the required information (URL, API Key, ISBN) and click "Find" to populate the AI sheet.

Customising Your AI Sheet:

  • In your Google Doc, use specific keywords as placeholders (e.g., Title_) where you want product information to appear.

  • The script will replace these placeholders with actual product data, retaining any formatting or styling.

  • Refer to the GraphQL schema to add or remove fields as needed.

Resetting the Document:

  • To generate a new AI sheet for a different product, reset the document to its template form before running the script again. Failure to do so may result in incorrect or incomplete data population.

Here is an example of how your AI could look before it is populated.

Google Docs screenshot showing an AI sheet containing templated text.

This is how your AI could look once you have run the script.

An AI Sheet populated using GraphQLarrow-up-right

Last updated