ul#navigation-items > div > li > div {
  justify-content: space-between;
}

/* Sidebar customisations */
#sidebar {
  left: 2rem;
}
#sidebar > div:first-of-type {
  background: none;
}
#navigation-items .py-1\.5 {
  padding-top: 0.275rem;
  padding-bottom: 0.24rem;
}

/* Logo size */
img[src*="logo/light.png"],
img[src*="logo/dark.png"] {
  height: 1.25rem;
}

/* Logo/nav spacing */
#sidebar-content > div > div:first-of-type {
  margin-bottom: 1.5rem;
}
@media (min-width: 1024px) {
  /* Logo */
  #sidebar-content > div > div:first-of-type {
    position: fixed;
    top: 0;
    z-index: 1000;
    margin-top: 0;
    padding-top: 1.25rem;
    padding-bottom: 1rem;
    width: 17rem;
    background-color: rgb(var(--background-light) / 1);
  }
  #sidebar-content:is(.dark *) > div > div:first-of-type {
    background-color: rgb(var(--background-dark) / 1);
  }
  /* Search */
  #sidebar-content > div > div:nth-of-type(2) {
    position: fixed;
    top: 38px;
    padding-top: 1.25rem;
    padding-bottom: 1rem;
    width: 16rem;
    background-color: rgb(var(--background-light) / 1);
    z-index: 10;
  }
  #sidebar-content:is(.dark *) > div > div:nth-of-type(2) {
    background-color: rgb(var(--background-dark) / 1);
  }
}

/* Nav bar bottom left */
#navbar-transition > div {
  border: transparent;
}
#navbar-transition:is(.dark *) {
  background-color: rgb(var(--background-dark) / 1);
}
@media (min-width: 1024px) {
  #sidebar {
    bottom: 7rem;
    z-index: 1;
  }
  #sidebar-content {
    padding-top: 7.25rem;
  }
  #navbar .h-16.lg\:h-12 {
    height: 7rem;
  }
  #navbar {
    position: fixed;
    width: 19rem;
    z-index: 10;
    top: auto;
    bottom: 0;
    border-right: 1px solid;
    border-top: 1px solid;
    border-color: rgb(var(--gray-500) / 0.05);
  }
  #navbar-transition {
    display: none;
  }
  #navbar-transition ~ div {
    padding-left: 0;
  }
  #navbar:is(.dark *) {
    border-color: rgb(var(--gray-50) / 0.05);
  }
  #navbar > div:first-of-type {
    left: 0;
    padding-left: 0;
    bottom: 0;
    top: 0;
    z-index: 10000;
    margin: initial;
    position: sticky;
    background: #fff;
  }
  #navbar > div > div > div > div {
    padding-left: 2rem;
    padding-right: 2rem;
  }
  #navbar > div > div > div > div > div > div.flex-1.relative {
    display: block;
  }
  #navbar > div > div > div > div > div > div > nav > ul {
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
  }
  #navbar > div > div > div > div > div > div > nav > ul > li {
    margin: 0.5rem 0;
    width: 100%;
  }
  #navbar > div > div > div > div > div > div > nav > ul > li > a {
    position: relative;
    padding-right: 1.5em;
    display: block;
    width: 100%;
  }
  #navbar > div > div > div > div > div > div > nav > ul > li > a::after {
    content: "\2197"; /* Unicode for north east arrow (↗) */
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    font-size: 0.8em;
  }
}

/* Dark mode toggle */
#navbar button.group.p-2.flex.items-center.justify-center {
  position: fixed;
  top: 0.8rem;
  left: 15rem;
  z-index: 1000000;
}

/* Page customisation */
@media (min-width: 1024px) {
  #content-container > div:first-of-type {
    padding-top: 3rem;
  }
  html {
    --scroll-mt: 3rem;
  }
}

/* Horizontal card icons */
a.card > div.items-center {
  align-items: start;
}

a.card > div.items-center > div > svg {
  width: 1.2rem;
}

/* Adding spacing above and below sub nav lists */
#navigation-items li > ul > li:first-child > a,
#navigation-items li > ul > li:first-child > div {
  padding-top: 0.5rem;
}
#navigation-items li > ul > li:last-child > a,
#navigation-items li > ul > li:last-child > div {
  padding-bottom: 0.5rem;
}


/* Changelog dates */
.update-container > div:first-of-type > div:nth-of-type(2) {
  background-color: rgb(0,0,0,0.05);
  color: rgb(0,0,0,0.5);
}

.dark .update-container > div:first-of-type > div:nth-of-type(2) {
  background-color: rgb(255,255,255,.1);
  color: rgb(255,255,255,0.6);
}


if (window.location.pathname == "/") {
  document
    .querySelector("header ~ div.leading-6.mt-14 > div.pb-16")
    .classList.add("hidden");
}


Web font support

General list of email-safe fonts

Loops

Contact Us

Loops.so

Log in

Font support via Google Fonts is now available in Loops.

Font support

Welcome to Loops, the platform for SaaS email.

Quickstart

Steps for adding a sending domain to your account.

Setting up your domain

Learn about the three types of emails that you can send with Loops: Campaigns, Loops, and Transactional.

Types of emails

A guide for creating and sending emails with Loops.

Sending your first email

Learn how to edit emails in the Loops editor.

Adding content

Create re-usable elements for your emails.

Components

Managing styles

Add context and personalization to emails.

Personalizing emails

Use Loops with Emailify, Email Love or MJML.

Upload a custom email

Uploading a custom email

Re-use basic elements of an email or create email templates.

Duplicating emails

Loops let you send emails based on something happening, like a contact property updating, a new contact being created or an external event happening in another platform.

Guide

Loop builder

Learn how to trigger a Loop to start sending emails.

Triggering Loops

Learn how to pause and stop a Loop to control the sending of emails.

Pausing Loops

Branching loops allow you to send different emails based on a contact's properties within a single Loop.

Branching Loops

Events let you trigger emails when something happens in an external platform.

Events

Learn how to use event properties to personalize your emails.

Event properties

Organise contacts and offer a subscriber preference center with mailing lists.

List management

How to send emails to specific groups of contacts and save segments for future use.

Filters and Segments

How to add, edit and delete contact properties.

Contact properties

The contact activity timeline is a great way to see all the activity for a specific contact.

Contact activity timeline

Learn about sending transactional email with Loops.

Introduction

Introduction to transactional email

How to send transactional email with Loops.

Transactional email guide

How to send attachments with your transactional email.

Attachments

Loops integrates with thousands of other platforms so you can sync contacts and trigger emails from around the internet.

Overview

Integrations

Send data to Loops from supported platforms using webhooks.

Incoming webhooks

Import emails and contacts to your CRM by adding a BCC address to your marketing emails.

Auto BCC

Send Auth0 authentication emails with Loops.

Auth0

Integrate the Loops API into your Bubble app with our plugin.

Bubble

Enable sign ups to Loops using a native Carrd form.

Carrd

Send user data from your data warehouse to Loops.

Census

Sync contacts and send emails triggered by events in Clerk.

Clerk

Enable signups from your Framer site using an in-built or custom Loops component.

Framer

Integrately

Utilize our official Make integration to manage contacts and send email.

Make

Utilize our official Segment integration to manage contacts and send email.

Segment

Sync contacts and send emails triggered by events in Stripe.

Stripe

Configure your Supabase account to send authentication emails with Loops.

Supabase

Enable signups from your site using a native Webflow form.

Webflow

Connect Loops to thousands of apps to manage contacts and send email.

Zapier

Send with SMTP

Send transactional emails from your Django project using Loops' SMTP service.

Django

Send transactional emails from your Laravel project using Loops' SMTP service.

Laravel

Send transactional emails from your Rails project using Loops' SMTP service.

Ruby on Rails

How to update the email address you use to log in to Loops.

Change your login email

How to add and manage team members in your Loops account.

Team members

Free plan

Learn how to receive notifications about new Loops contacts in external tools.

Notifications

The Loops REST API lets you manage your contacts, send events and send transactional email.

API Introduction

SDKs

Nuxt

Nuxt module

Ruby

Ruby SDK

API Changelog

All guides

Guides

How we monitor sends to increase the deliverability of your emails.

Deliverability optimization

If your emails are not landing in the inbox folder you expect, here are some tips to improve your inbox placement.

Improve your inbox placement

Tips for sending emails to a large group of new contacts.

Sending to large audiences

Most email services (including Loops) prefer sending emails from subdomains (hey.company.com) over root domains (company.com).

Subdomains vs root domains

Understanding how to build your sender reputation.

Building your sender reputation

Gmail doesn't report spam reports to Loops, so setting up Google Postmaster is key to getting an idea of your deliverability performance in Gmail.

Insights from Google Postmaster

Understand how open rates can be affected by clients and networks.

Email open rates

Set up your email sending avatar through third-party platforms like Gmail and Outlook.

Add a sending avatar

A clean list is a happy list. Here’s how to keep your list clean and your emails deliverable.

Maintaining a clean list

Send data to Loops from Bubble using the API Connector plugin.

Bubble API Connector

Send automated email sequences to new Ghost subscribers using Zapier and Loops.

Email sequence for Ghost

Set up a welcome email sequence for new Ghost members

How to send a daily, weekly or monthly email with a summary of what's happened in your app.

Scheduled digest

How to create a scheduled email with Loops

Our updated, definitive guide for sending product updates.

Product updates

A quick guide for sending a campaign to subscribers who signed up since you sent it out.

Support	Platform
No	Gmail
No	Outlook
Yes	Apple Mail
Yes	Samsung
Yes	Comcast
No	AOL
No	Yahoo

Learn

API

Guides

​Web font support

​General list of email-safe fonts

Web font support

General list of email-safe fonts