Development Tools

Code Library

A repository of code snippets and utilities for our websites

Code Library

This page is a repository of code snippets and utilities for our websites.

Email Content Update - ISAT (Fall 2025)

Upload the relevant HTML files and the copy deck along with this prompt:

You are an expert email HTML developer with experience building dynamic, responsive templates for SendGrid.

Task: Populate 5 email templates based on the provided “copy deck” and sample HTML files.

Templates required:
1. Rejected Email — English
2. Rejected Email — French
3. Approved Email — English
4. Approved Email — French
5. Login Email (single template combining English & French)

---

Context:
- The sample HTML for Rejected, Approved, and Login emails is provided as a baseline for coding style, layout, and dynamic fields. 
- The copy deck contains the new content, images, and URLs to use.  
- Do not carry over any images, copy, or URLs from the sample HTMLs — only use content from the copy deck.

---

Special rules:

**Login Emails**
- Only one HTML should be generated.  
- Use conditional logic:
  - English: '{{#equals this.preferred_lang "en-CA"}} ... {{/equals}}'
  - French: '{{else}} ... {{/else}}'  
- Replace all instances of “en-CA” with “fr-CA” in the French sections.

**Formatting Rules**
- Superscript ® or ™ using '<sup> ... </sup>'.  
- Bold text with '<strong> ... </strong>'.  
- Apply '<br>' wherever line breaks appear in the copy deck.  
- Make all email addresses clickable with 'mailto:'.  
- Ensure all “click here,” “program details,” or “Détails du programme” text is hyperlinked with the URLs from the copy deck.  
- **All '<a href="">' URLs must include 'https://'.**
- If the sections in the copy deck are labeled as “French,” ensure that all instances of “en-CA” are replaced with “fr-CA” in the generated HTML.

**Styling Rules**
- Match text size, color, font family, and layout from the sample HTMLs.  
- Maintain table-based layout for cross-client compatibility.  
- Ensure templates render consistently across service providers.

**Dynamic Content Rules**
- Preserve all existing dynamic fields (e.g., '{{#if other_data.[0].first_name}} ... {{/if}}', '{{other_data.[0].store_id}}', '{{#each files}} ... {{/each}}').  
- Within display type blocks (e.g., '{{#equals other_data.[0].display_type "half_pallet"}}Half Pallet{{/equals}}'), the values may change but the structure must remain intact.  
- For tokens or discount codes (e.g., '{{ prizes.[0].fulfillment_token }}'), display them centered, bolded, and highlighted:

Email Content Update - RV (Fall 2025)

Upload the relevant HTML files and the copy deck along with this prompt:

You are an expert email HTML developer with experience building dynamic, responsive templates for SendGrid.

Task: Populate {x} email templates based on the provided “copy deck” and sample HTML files.

Templates required:
1. Rejected Email — English
2. Approved Email — English
3. …other template names

---

Context:
- The sample HTML for Rejected(cod-rej), Approved(cod-app) are provided as a baseline for coding style, layout, and dynamic fields. 
- The copy deck contains the new content, images, and URLs to use.  
- Do not carry over any images, copy, or URLs from the sample HTMLs — only use content from the copy deck.

---

Special rules:
**Copy Deck**
In the copy deck, use only the sections with the heading:
*Use this if the copy deck contains landing page and other stuff not needed 

**Formatting Rules**
- Superscript ® or ™ using '<sup> ... </sup>'.  
- Bold text with '<strong> ... </strong>'.  
- Apply '<br>' wherever line breaks appear in the copy deck.  
- Make all email addresses clickable with 'mailto:'.  
- Ensure all “click here,” “program details,” or “Détails du programme” text is hyperlinked with the URLs from the copy deck.  
- **All '<a href=""> URLs must include 'https://'.**

**Styling Rules**
- Match text size, color, font family, and layout from the sample HTMLs.  
- Maintain table-based layout for cross-client compatibility.  
- Ensure templates render consistently across service providers.

**Dynamic Content Rules**
- Preserve all existing dynamic fields (e.g., '{{#if other_data.[0].first_name}} ... {{/if}}', '{{other_data.[0].store_id}}', '{{#each files}} ... {{/each}}').  
- Within display type blocks (e.g., '{{#equals other_data.[0].display_type "half_pallet"}}Half Pallet{{/equals}}'), the values may change but the structure must remain intact.  
- For tokens or discount codes (e.g., '{{ prizes.[0].fulfillment_token }}'), display them centered, bolded, and highlighted:

Campaign Landing Page Content Update

Upload the relevant HTML files and the copy deck along with this prompt:

You are a developer and the task is to update the copy, image alt tags, and URLs within the HTML files attached with the copy within the attached docx. These are the HTML files:

1. casestudy-isat.html

We are only replacing the copy, image alt tags, and URLs, nothing else. Everything else should stay the same. Do not touch the style, do not change how things are listed, do not change the format, do not change the order.

*Note: If you're updating the language, specify that you're updating with the French copy.

Agency FB

Used for: Monster Energy

Step 1: HTML Link Tag

Place this in your HTML's <head> section. If it is a V2 site, then place this in the SEO script area box.

<link type="text/css" rel="stylesheet" href="https://unoapp.com/shared/fonts/AgencyFB/stylesheet.css" crossorigin />

Step 2: CSS Font-Family Rule

Use this rule in your stylesheet to apply the font.

@font-face {
    font-family: 'Agency FB';
    src: url('https://unoapp.com/shared/fonts/AgencyFB/AgencyFB-Reg.woff2') format('woff2'),
        url('https://unoapp.com/shared/fonts/AgencyFB/AgencyFB-Reg.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Agency FB';
    src: url('https://unoapp.com/shared/fonts/AgencyFB/AgencyFB-Bold.woff2') format('woff2'),
        url('https://unoapp.com/shared/fonts/AgencyFB/AgencyFB-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Agency FB';
    src: url('https://unoapp.com/shared/fonts/AgencyFB/AgencyFB-Black.woff2') format('woff2'),
        url('https://unoapp.com/shared/fonts/AgencyFB/AgencyFB-Black.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

Avenir Next

Used for: Monster Energy

Step 1: HTML Link Tag

Place this in your HTML's <head> section. If it is a V2 site, then place this in the SEO script area box.

<link type="text/css" rel="stylesheet" href="https://unoapp.com/shared/fonts/AvenirNext/stylesheet.css" crossorigin />

Step 2: CSS Font-Family Rule

Use this rule in your stylesheet to apply the font.

@font-face {
    font-family: 'Avenir Next';
    src: url('https://unoapp.com/shared/fonts/AvenirNext/AvenirNext-Regular.woff2') format('woff2'),
        url('https://unoapp.com/shared/fonts/AvenirNext/AvenirNext-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Avenir Next';
    src: url('https://unoapp.com/shared/fonts/AvenirNext/AvenirNext-Bold.woff2') format('woff2'),
        url('https://unoapp.com/shared/fonts/AvenirNext/AvenirNext-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Avenir Next';
    src: url('https://unoapp.com/shared/fonts/AvenirNext/AvenirNext-Heavy.woff2') format('woff2'),
        url('https://unoapp.com/shared/fonts/AvenirNext/AvenirNext-Heavy.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

Canadiana Display

Used for: Canada Post

Step 1: HTML Link Tag

Place this in your HTML's <head> section. If it is a V2 site, then place this in the SEO script area box.

<link type="text/css" rel="stylesheet" href="https://unoapp.com/shared/fonts/CanadianaDisplay/stylesheet.css" crossorigin />

Step 2: CSS Font-Family Rule

Use this rule in your stylesheet to apply the font.

@font-face {
    font-family: 'Canadiana Display';
    src: url('https://unoapp.com/shared/fonts/CanadianaDisplay/CanadianaDisplay-SemiBold.woff2') format('woff2'),
        url('https://unoapp.com/shared/fonts/CanadianaDisplay/CanadianaDisplay-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Canadiana Display';
    src: url('https://unoapp.com/shared/fonts/CanadianaDisplay/CanadianaDisplay-Regular.woff2') format('woff2'),
        url('https://unoapp.com/shared/fonts/CanadianaDisplay/CanadianaDisplay-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

GT Walsheim Condensed Ultra Bold

Used for: Fuze

Step 1: HTML Link Tag

Place this in your HTML's <head> section. If it is a V2 site, then place this in the SEO script area box.

<link type="text/css" rel="stylesheet" href="<https://unoapp.com/shared/fonts/TCCC-UnityText/stylesheet.css>" crossorigin />

Step 2: CSS Font-Family Rule

Use this rule in your stylesheet to apply the font.

@font-face {
    font-family: 'GT Walsheim Condensed Ultra';
    src: url('https://unoapp.com/shared/fonts/TCCC-UnityText/GTWalsheim-CondensedUltraBold.woff2') format('woff2'),
        url('https://unoapp.com/shared/fonts/TCCC-UnityText/GTWalsheim-CondensedUltraBold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

Mark OT

Used for: Keurig Dr Pepper

Step 1: HTML Link Tag

Place this in your HTML's <head> section. If it is a V2 site, then place this in the SEO script area box.

<link type="text/css" rel="stylesheet" href="<https://unoapp.com/shared/fonts/MarkOT/stylesheet.css>" crossorigin />

Step 2: CSS Font-Family Rule

Use this rule in your stylesheet to apply the font.

@font-face {
  font-family: 'MarkOT';
  src: url('<https://unoapp.com/shared/fonts/MarkOT/MarkOT-Medium.woff2')> format('woff2'),
      url('<https://unoapp.com/shared/fonts/MarkOT/MarkOT-Medium.woff')> format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
    font-family: 'MarkOT';
    src: url('<https://unoapp.com/shared/fonts/MarkOT/MarkOT-Bold.woff2')> format('woff2'),
        url('<https://unoapp.com/shared/fonts/MarkOT/MarkOT-Bold.woff')> format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

TCCC-Unity Headline & Text

Used for: Coca Cola

Step 1: HTML Link Tag

Place this in your HTML's <head> section. If it is a V2 site, then place this in the SEO script area box.

<link type="text/css" rel="stylesheet" href="<https://unoapp.com/shared/fonts/TCCC-UnityText/stylesheet.css>" crossorigin />

Step 2: CSS Font-Family Rule

Use this rule in your stylesheet to apply the font.

@font-face {
    font-family: 'TCCC-UnityHeadline';
    src: url('https://unoapp.com/shared/fonts/TCCC-UnityText/TCCC-UnityHeadline-Black.woff2') format('woff2'),
        url('https://unoapp.com/shared/fonts/TCCC-UnityText/TCCC-UnityHeadline-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'TCCC-UnityText';
    src: url('https://unoapp.com/shared/fonts/TCCC-UnityText/TCCC-UnityText-Regular.woff2') format('woff2'),
        url('https://unoapp.com/shared/fonts/TCCC-UnityText/TCCC-UnityText-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'TCCC-UnityText';
    src: url('https://unoapp.com/shared/fonts/TCCC-UnityText/TCCC-UnityText-Bold.woff2') format('woff2'),
        url('https://unoapp.com/shared/fonts/TCCC-UnityText/TCCC-UnityText-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}