Building Emails in GC Outreach

GiveCampus uses a rich media editor that provides the flexibility and features you need to build email HTML.

For a quick overview with helpful tips and tricks on using the email builder, check out the video linked here. It’s a short walkthrough, under five minutes.

If you'd like a more detailed, step-by-step guide on creating an email with Outreach, you can watch this video, which is about 30 minutes long.

 

Adding & Editing Components

Utilize the + element to add various components wherever you are selected in the builder.

Make an image act as a link

You can make any image clickable so recipients are taken to a campaign page, autofill/personalization link, or any valid URL.

1. Click on the image in the email builder to select it. The settings panel on the right expands to display the image settings.
2. In the Content section, locate the Link URL field (below the Alt Text field).
3. Paste the full destination URL into the Link URL field—for example, a campaign page URL, unique tracking link, auto-fill link, or personalization link.
4. Click or tab away from the field to apply the change. The link is saved automatically when the field loses focus.

Notes and best practices:

• The entire image becomes clickable, sending recipients to the specified link.
• The Link URL field accepts campaign, giving form, or event URLs, as well as tracking, auto-fill, and personalization links.
• After editing, send a test email and click the image to confirm the link and any tracking or personalization parameters work as expected.

Accessibility tip:

• Add descriptive alt text using the Alt Text field so screen-reader users understand the link's destination (for example, "Open campaign page: [Campaign Title]").

 

Snippets are GiveCampus pre-made components that can be used as starting points / building blocks for your email to replace content and placeholder imagery

Merge Tags can be added and inserted via the top menu or the in-line editor + Add icon. There is a list of pre-selected standard merge tags you can add in. If you pick a merge tag that does not have a value for a recipient, it will remain blank in the email. Any test emails you send will utilize placeholder values.

Navigating the Editor

You can navigate the editor in two ways. The first is to utilize the small two-lined (hamburger) menu in line on the component to go up levels at a time on pieces of the email. The second is to utilize the breadcrumb menu at the top of the editor to move through the layers of your build.

GiveCampus Specific Plugins

There are a select couple of GiveCampus specific plugins in the email builder in GC Outreach. 

Add a GC Video - Utilize the video icon in the top to add in any GC Video landing page directly to the email. The video will link to the landing page and the thumbnail will pre-populate along with a play button across the top to drive engagement from your recipients

When you select a video, the thumbnail you have chosen in GC Video will be added as an image with an automatic play button on top of the imagery. The link will be pre-populated to take users to the video landing page and the alt text will be pre-filled with the title of your video landing page from GC Video

 

Add a GiveCampus Campaign, Giving Form, or Event Link - Utilize the GiveCampus link icon (far right link adder) to add a specific button or hyperlinked text to a campaign, giving form, or event registration page without having to copy / paste from across the platform. 

Both Giving Forms and Events have the option to add in direct link, any unique tracking link you have already created for that form/campaign, create an auto-fill link, or use personalization links you have generated through data upload in online giving already.

• To learn more about personalization links check out this GCU article.
• To learn more about auto-fill links check out this GCU article.
• To learn more about unique tracking links check out this GCU article

Email Templates

Save any email you create or create a new one for this purpose as a school specific email template. When creating a new email outreach, choose to "start from a template" if you would like to use that as a starting point for a specific type of outreach.

There are additionally email templates available to all GiveCampus partners that are created and placed by GiveCampus. These will all have the [GiveCampus] language in front of them and have placeholder content that can be used to help you understand ways to optimize these various different email types. 

 

Are you able to directly edit the HTML of the email?
While our editor does support HTML editing directly in the editor using the "HTML" icon in the top bar, we recommend you are cautious when doing so. Our editor will not block you from inputting bad HTML and the editor will not be able to render bad HTML inputs.

You can use the HTML editor to change aspects of your email's design such as image and button sizes, element positions, and overall design widths and layouts. This is an advanced feature and we recommend only using it if you're familiar with HTML and coding. We can't guarantee we'll be able to troubleshoot any design issues on a template if you've modified the HTML. 

How to Custom Fonts to Your Email Builder

To add your preferred fonts to the GiveCampus platform for use in GC Outreach emails:

1. Access Font Settings

- Go to your School Dashboard

- Navigate to Settings > General Settings

- Look for the font customization section

2. Choose Your Font from Google Fonts

- Visit the Google Fonts page (https://fonts.google.com/)

- Browse and select your desired font families (e.g., Montserrat, Open Sans, etc.)

- Copy the Google Fonts URL for your selected fonts

3. Add Font to GiveCampus

- Paste the Google Fonts URL into the designated field in your GiveCampus settings

- Save your changes

- Verify that the font appears in the available font list

- Check that the font is now available in the GC Outreach email builder

Important Font Considerations

• Email Client Compatibility: If a recipient's email provider doesn't support your custom font, the email will automatically fall back to a default web-safe font
• Testing Recommended: Always test your emails across different email clients to ensure proper rendering
• Font Loading: Custom fonts may take slightly longer to load, so consider this for email performance

Common Font Questions

Q: What happens if my custom font doesn't display properly?

A: Email clients that don't support the custom font will automatically fall back to a default font like Arial or Times New Roman.

Q: Can I use fonts other than Google Fonts?

A: Currently, GiveCampus supports Google Fonts integration. Contact support if you need to use a different font provider.

Q: How do I know if my font is working?

A: After adding the font URL, check the font dropdown menu in the GC Outreach email builder to confirm it appears as an option.

 

Image Guidelines for GC Outreach Emails

Recommended Image Dimensions

For GC Outreach emails, image sizing depends on how you're using the image in your email layout:

Full-width email images: 600-650 pixels wide (recommended standard for email width) Logo images: Typically smaller, around 200-300 pixels wide depending on placement Thumbnail images: Variable sizing based on your email layout and design needs Content images: Size according to your specific email design requirements

Common Variations of This Question

• What are the image size requirements for Outreach?
• What image dimensions should I use in GC Outreach emails?
• Are there specific image guidelines for email marketing in Outreach?
• What's the best image size for Outreach email templates?
• How big should my images be in GC Outreach?

Important Notes About Email Images

File size considerations:

• Keep images optimized for email delivery
• Larger file sizes may affect email load times
• Consider your recipients' email clients and internet connections

Email client compatibility:

• Different email clients may display images differently
• Test your emails across multiple email clients when possible
• Some recipients may have images blocked by default

Design flexibility:

• GC Outreach's rich media editor allows for flexible image placement
• Images can be resized within the editor to fit your design needs
• Use the preview function to test how images appear before sending

Best Practices

1. Test your images: Always send test emails to see how images display

2. Optimize for mobile: Many recipients view emails on mobile devices

3. Include alt text: Add descriptive alt text for accessibility

4. Balance content: Don't rely solely on images to convey your message

 

How to Create Email Address Links

Adding clickable email links (mailto links)

To create clickable email addresses in your outreach emails:

Method 1: Using the HTML Editor (Recommended)

1. Switch to the HTML editor by clicking the "<>" button

2. Type your email link code directly: email@domain.edu

3. Switch back to visual editor to continue building your email

Method 2: Link Dialog Workaround

1. Select the email address text in your email

2. Click the link icon in the toolbar

3. In the URL field, enter: mailto:email@domain.edu

4. Note: The visual editor may show "invalid URL" but this will work correctly when sent

 

Have you gotten an error that says 'Invalid Link' when previewing your finished email? This is why "invalid URL" appears for email links

The GC Outreach link validator is designed for web URLs, so it flags email addresses as invalid. This is just a visual warning - your mailto links will function properly in sent emails.

Troubleshooting email links:

• If the link dialog shows errors, use the HTML editor method
• Test your email by sending to yourself to verify the email link works
• The "invalid URL" message can be safely ignored for mailto links

Text Formatting and Component Management

Working with Wrapped Text Components

When building emails, you may encounter "wrapper text" components that you want to convert to simple text boxes.

To unwrap text components:

1. Click on the wrapped text element you want to modify

2. Look for the menu button (two horizontal lines) to the left of the component

3. Click the menu button and select "Unwrap" from the dropdown options

4. The wrapped text will convert to a standard text box for easier editing

Dark mode display: why colors change and how to fix black-on-black text

If your signature or footer appears nearly invisible (for example, black text on a dark background) in some inboxes, you are experiencing dark mode rendering. Email clients automatically adjust colors based on device settings, so text that looks normal in the editor might display differently for recipients.

key points

• Dark mode inverts colors based on device settings and email client behavior.
• GC Outreach does not provide a setting to force light mode.
• Variations exist across clients like Gmail, Apple Mail, and Outlook.
• Using inline styles with explicit color values can mitigate issues, though some clients may override them.

quick fixes for signatures, footers, and other text

1. Set explicit text colors:

   • Apply a specific color (such as a mid-tone brand color) to signature, sign‑off, or footer text.
   • Also set explicit colors for links to prevent them from appearing low contrast.

2. Define both text and background colors:

   • For elements like buttons or callouts that allow a background, choose both text and background colors to limit inversion.

3. Use inline styles for persistent issues:

   • If a line still displays poorly, add an inline style directly in the HTML. For example:

   <span style="color:#005FA3;">Jane Doe<br>Director of Annual Giving</span>
   

4. Test across clients:

   • Send test emails in Gmail, Apple Mail, and Outlook, and toggle dark mode to ensure legibility.

practical tips

• Choose mid‑tone, brand‑approved colors instead of pure black or pure white.
• Apply explicit colors to critical details, such as the sender’s name, title, and contact info.
• Use simple HTML; complex nesting can increase the chance of style overrides.

limitations

• No solution guarantees identical dark mode rendering across all inboxes.
• Inline styles help, but some email clients may still partially invert colors.

Following these steps should resolve or significantly reduce dark mode issues, especially for signatures.

When to Use Unwrapped Text:

• For simple text blocks that don't need special formatting
• When you want more direct control over text styling
• To simplify complex component structures in your email

Troubleshooting GC Video Dropdown Issues:

If the GC Video dropdown appears empty when trying to add a video to your email:

• Verify that your school has GC Video enabled
• Ensure your videos are published as landing pages in GC Video
• Only published GC Video landing pages will appear in the dropdown
• You cannot upload videos directly to the outreach editor - videos must first be created in GC Video