Support message templates

Where to find message templates

The kebab-case labels in the following flowchart equate to template names in the drive folder. The templates are stored in https://drive.google.com/drive/u/0/folders/1EMoVlymLX6V6-8xdG8hOC6rDzp_18A3L.

Email components

Occasionally templates will include a variable like emailComponent:componentName. If it starts with emailComponent, it means you should insert another template into this template when creating your specific copy. This additional template is an email component: a segment of an email that gets used in multiple emails. These email components are found under a special email-components folder next to the rest of the email templates. The componentName is the name you'll find this template under. For example, emailComponent:humanSidekick means you should insert the content of the humanSidekick template into your email.

Save templates in Gmail

Activate MailMeteor

MailMeteor is a bulk email Add-on for Google Sheets. There are others to use but this is the easiest to work with for the price (free!).

Open MailMeteor

Move the Google docs template to your MailMeteor templates

How to create partner connection status flowcharts

Using MermaidJS

A fast and quickly editable way to make the status flowcharts for partner connections is with MermaidJS. Mermaid is a domain-specific language (DSL) made for rendering charts with the associated rendering engine. In other words, it allows you to draw charts by "coding" them. This may seem scary at first, but it makes it really easy then to make updates, save different versions, copy and paste... anything you can do by plopping open a Nodepad or Word doc, you can now do with drawing charts.

For example, you could track status in a spreadsheet, and then write a formula based on the status that outputs the proper MermaidJS code!

For example, this chart:

Comes from this code:

graph LR
    %% Name the stages
    call(Planning Call) 
    kickoff(Entry Event) 
    feedback(Project Feedback) 
    video(Exit Video) 
    exemplar(Expert Work Sample)
    
    %% Steps
    call --> kickoff --> feedback --> video
    exemplar --> kickoff​
    
    %% Pick which stage to wrap for the current status
    subgraph "You are here"
        call
    end
    
    %% Customize the styling
    classDef sk fill:#9a67ea33, stroke:#673AB7;
    classDef optional stroke-dasharray:5, 5;
    classDef done opacity:0.5;
    classDef active font-weight:bold, stroke-width:2px;
    
    %% Add the custom styles to the various stages
    class call,exemplar,kickoff,updates,feedback,video sk;
    class exemplar,feedback,video optional;
    class exemplar done;
    class call active;

Use the Live Editor link below to get started

If the chart has to be made manually, use the live editor. This link provides you the starting point.​

Update the code

#TODO

• Change which id goes in the subgraph

• Remove parts of the flow that don't exist for this project

Fix styling issues in the chart

#TODO

• Remove height from the

• Make width=100% in the

• In the that holds the relevant text, make the width bigger

• Then, in the (for group) that holds that foreignObject>, make the x in translate(x, y) the equivalent number smaller.

Get a snapshot of the chart

Then, download the SVG or, if necessary, convert the SVG to png (or take a screenshot of your screen in the live editor) so you can use it in other places that don't support SVG (e.g., Google Docs or email).