> ## Documentation Index
> Fetch the complete documentation index at: https://loops.so/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Loops Documentation

> Loops documentation for marketing and transactional email: quickstart, integrations, API reference, webhooks, deliverability guides, and best practices.

export const SupabaseIcon = () => {
  return <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 109 113">
      <path fill="url(#a)" d="M63.708 110.284c-2.86 3.601-8.658 1.628-8.727-2.97l-1.007-67.251h45.22c8.19 0 12.758 9.46 7.665 15.874l-43.151 54.347Z" />
      <path fill="url(#b)" fillOpacity=".2" d="M63.708 110.284c-2.86 3.601-8.658 1.628-8.727-2.97l-1.007-67.251h45.22c8.19 0 12.758 9.46 7.665 15.874l-43.151 54.347Z" />
      <path fill="#ffbca6" d="M45.317 2.071c2.86-3.601 8.657-1.628 8.726 2.97l.442 67.251H9.83c-8.19 0-12.759-9.46-7.665-15.875L45.317 2.072Z" />
      <defs>
        <linearGradient id="a" x1="53.974" x2="94.163" y1="54.974" y2="71.829" gradientUnits="userSpaceOnUse">
          <stop stopColor="#FF4A00" />
          <stop offset="1" stopColor="#ffbca6" />
        </linearGradient>
        <linearGradient id="b" x1="36.156" x2="54.484" y1="30.578" y2="65.081" gradientUnits="userSpaceOnUse">
          <stop />
          <stop offset="1" stopOpacity="0" />
        </linearGradient>
      </defs>
    </svg>;
};

## Start here

<CardGroup cols={2}>
  <Card href="/quickstart" title="Set up Loops yourself" icon="user">
    Follow the step-by-step quickstart to get started with Loops.
  </Card>

  <Card href="/quickstart-agents" title="Have an agent use Loops" icon="robot">
    Install the CLI and skills with one command so your coding agent can use Loops for you.
  </Card>
</CardGroup>

## Guides

<Card href="/creating-emails/editor" title="Editing emails" icon="keyboard" horizontal={true}>
  How to craft an email using our editor
</Card>

<Card href="/sending-domain" title="Set up your sending domain" icon="globe" horizontal={true}>
  Set up your domain to start sending email
</Card>

<Card href="/deliverability/improving-inbox-placement" title="Improve your inbox placement" icon="mailbox" horizontal={true}>
  Read our guide for improving your email deliverability and placement
</Card>

<Card href="/transactional" title="Start sending transactional email" icon="laptop" horizontal={true}>
  Learn how to send transactional email
</Card>

<Card href="/guides/product-updates" title="Send a product update email" icon="rocket" horizontal={true}>
  Learn how to send a product update email
</Card>

## Loops for Agents

<CardGroup cols={2}>
  <Card href="/cli" title="Loops CLI" icon="terminal">
    Manage contacts, send events, and test transactional email from your terminal
  </Card>

  <Card href="/skills" title="Loops skills" icon="book">
    Install Loops skills and teach your agent how to work with Loops.
  </Card>
</CardGroup>

## SDKs

Add Loops to your application in minutes with our SDKs.

<CardGroup>
  <Card title="Go" icon="golang" href="/sdks/go">
    The official Go SDK for Loops.
  </Card>

  <Card title="JavaScript" icon="js" href="/sdks/javascript">
    The official JavaScript/TypeScript SDK for Loops.
  </Card>

  <Card title="Nuxt" icon={<svg viewBox="0 0 61 40" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M33.9971 39.539H56.5247C57.2402 39.539 57.9432 39.3564 58.5628 39.0093C59.1825 38.6623 59.697 38.1631 60.0546 37.5619C60.4122 36.9608 60.6003 36.2789 60.6 35.5849C60.5997 34.8908 60.411 34.2091 60.0528 33.6083L44.9239 8.1904C44.5663 7.5894 44.0519 7.09032 43.4324 6.74332C42.8129 6.39632 42.1101 6.21363 41.3947 6.21363C40.6793 6.21363 39.9766 6.39632 39.357 6.74332C38.7375 7.09032 38.2231 7.5894 37.8655 8.1904L33.9971 14.6939L26.4338 1.97648C26.0759 1.37553 25.5613 0.876518 24.9416 0.52958C24.3219 0.182643 23.619 0 22.9035 0C22.188 0 21.4851 0.182643 20.8654 0.52958C20.2457 0.876518 19.7311 1.37553 19.3732 1.97648L0.547184 33.6083C0.189033 34.2091 0.00031171 34.8908 3.85805e-07 35.5849C-0.000310938 36.2789 0.187799 36.9608 0.54541 37.5619C0.903021 38.1631 1.41752 38.6623 2.03717 39.0093C2.65681 39.3564 3.35975 39.539 4.07528 39.539H18.2162C23.819 39.539 27.9509 37.1518 30.794 32.4945L37.6965 20.8993L41.3936 14.6939L52.4895 33.3335H37.6965L33.9971 39.539ZM17.9857 33.3272L8.11711 33.325L22.9101 8.47362L30.2912 20.8993L25.3492 29.2044C23.4611 32.2262 21.3162 33.3272 17.9857 33.3272Z" fill="#FF4A00"/></svg>} href="/sdks/nuxt">
    The official Nuxt module for Loops.
  </Card>

  <Card title="PHP" icon="php" href="/sdks/php">
    The official PHP SDK for Loops.
  </Card>

  <Card title="Ruby" icon={<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" fill="#FF4A00"><path d="M 3.125 23.160156 L 8.183594 14.480469 C 8.230469 14.394531 8.292969 14.316406 8.363281 14.253906 L 17.441406 5.792969 C 17.539063 5.703125 17.65625 5.632813 17.78125 5.585938 L 25.578125 2.722656 L 32.152344 7.316406 L 28.878906 17.722656 L 16.597656 29.132813 L 6.582031 31.378906 Z M 7.296875 33.269531 L 11.96875 46.628906 L 15.8125 31.355469 Z M 42.484375 2.875 L 35.074219 6.992188 L 47.355469 15.910156 C 47.613281 14.761719 47.914063 13.195313 47.984375 11.863281 C 47.980469 11.847656 47.980469 11.828125 47.980469 11.808594 C 48.019531 9.910156 47.707031 7.925781 46.675781 6.210938 C 45.75 4.667969 44.359375 3.539063 42.535156 2.828125 C 42.519531 2.84375 42.507813 2.863281 42.484375 2.875 Z M 34.375 35.578125 L 29.296875 20.058594 L 18.988281 29.644531 Z M 31.144531 19.269531 L 36.1875 34.679688 C 40.132813 30.386719 44.171875 25.246094 46.476563 18.925781 Z M 45.382813 16.949219 L 33.851563 8.578125 L 31.117188 17.269531 Z M 5.761719 34.9375 L 2.335938 40.816406 C 3.507813 46.242188 7.566406 47.457031 10.242188 47.753906 Z M 4.878906 32.484375 L 2 25.644531 L 2 37.421875 Z M 39.921875 2.011719 C 39.90625 2.007813 39.890625 2 39.871094 2 L 28.039063 2 L 33.3125 5.6875 Z M 17.875 31.355469 L 13.777344 47.632813 C 22.109375 46.40625 28.359375 41.929688 33.425781 37.355469 Z M 44.546875 45.648438 C 44.3125 45.648438 44.074219 45.566406 43.882813 45.398438 L 35.617188 38.058594 C 31.984375 41.429688 27.742188 44.855469 22.519531 47.164063 L 44.5625 45.667969 C 44.691406 45.660156 44.8125 45.621094 44.925781 45.570313 C 44.804688 45.621094 44.675781 45.648438 44.546875 45.648438 Z M 37.0625 36.667969 L 45.210938 43.902344 C 45.382813 44.054688 45.472656 44.253906 45.511719 44.460938 L 47.195313 22.414063 C 44.582031 28.078125 40.742188 32.730469 37.0625 36.667969 Z"></path></svg>} href="/sdks/ruby">
    The official Ruby SDK for Loops.
  </Card>
</CardGroup>

## Integrations

Connect Loops with thousands of other platforms

<CardGroup cols={3}>
  <Card title="Stripe" icon="stripe-s" href="/integrations/stripe" horizontal={true} />

  <Card
    title="Bubble"
    icon={
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 17">
    <g fill="none" fillRule="nonzero" transform="translate(.5 .111)">
      <path
        fill="#FF4A00"
        d="M9.361 4.277c-1.474 0-2.928.633-4.037 1.877V.016H3.128v10.336a6.077 6.077 0 0 0 12.151 0c0-3.354-2.563-6.075-5.918-6.075Zm-.157 9.81a3.735 3.735 0 1 1 0-7.47 3.735 3.735 0 0 1 0 7.47Z"
      />
      <circle cx="1.53" cy="14.925" r="1.503" fill="#FF4A00" />
    </g>
  </svg>
}
    href="/integrations/bubble"
    horizontal={true}
  />

  <Card title="Supabase" horizontal={true} icon={SupabaseIcon()} href="/integrations/supabase" />

  <Card
    title="Zapier"
    icon={
  <svg
    viewBox="0 0 256 256"
    version="1.1"
    xmlns="http://www.w3.org/2000/svg"
    xmlnsXlink="http://www.w3.org/1999/xlink"
  >
    <g>
      <path
        d="M128.080089,-0.000183105 C135.311053,0.0131003068 142.422517,0.624138494 149.335663,1.77979593 L149.335663,1.77979593 L149.335663,76.2997796 L202.166953,23.6044907 C208.002065,27.7488446 213.460883,32.3582023 218.507811,37.3926715 C223.557281,42.4271407 228.192318,47.8867213 232.346817,53.7047992 L232.346817,53.7047992 L179.512985,106.400063 L254.227854,106.400063 C255.387249,113.29414 256,120.36111 256,127.587243 L256,127.587243 L256,127.759881 C256,134.986013 255.387249,142.066204 254.227854,148.960282 L254.227854,148.960282 L179.500273,148.960282 L232.346817,201.642324 C228.192318,207.460402 223.557281,212.919983 218.523066,217.954452 L218.523066,217.954452 L218.507811,217.954452 C213.460883,222.988921 208.002065,227.6115 202.182208,231.742607 L202.182208,231.742607 L149.335663,179.04709 L149.335663,253.5672 C142.435229,254.723036 135.323765,255.333244 128.092802,255.348499 L128.092802,255.348499 L127.907197,255.348499 C120.673691,255.333244 113.590195,254.723036 106.677048,253.5672 L106.677048,253.5672 L106.677048,179.04709 L53.8457596,231.742607 C42.1780766,223.466917 31.977435,213.278734 23.6658953,201.642324 L23.6658953,201.642324 L76.4997269,148.960282 L1.78485803,148.960282 C0.612750404,142.052729 0,134.946095 0,127.719963 L0,127.719963 L0,127.349037 C0.0121454869,125.473817 0.134939797,123.182933 0.311311815,120.812834 L0.36577283,120.099764 C0.887996182,113.428547 1.78485803,106.400063 1.78485803,106.400063 L1.78485803,106.400063 L76.4997269,106.400063 L23.6658953,53.7047992 C27.8076812,47.8867213 32.4300059,42.4403618 37.4769335,37.4193681 L37.4769335,37.4193681 L37.5023588,37.3926715 C42.5391163,32.3582023 48.0106469,27.7488446 53.8457596,23.6044907 L53.8457596,23.6044907 L106.677048,76.2997796 L106.677048,1.77979593 C113.590195,0.624138494 120.688946,0.0131003068 127.932622,-0.000183105 L127.932622,-0.000183105 L128.080089,-0.000183105 Z M128.067377,95.7600714 L127.945335,95.7600714 C118.436262,95.7600714 109.32891,97.5001809 100.910584,100.661566 C97.7553011,109.043534 96.0085811,118.129275 95.9958684,127.613685 L95.9958684,127.733184 C96.0085811,137.217594 97.7553011,146.303589 100.923296,154.685303 C109.32891,157.846943 118.436262,159.587052 127.945335,159.587052 L128.067377,159.587052 C137.576449,159.587052 146.683802,157.846943 155.089415,154.685303 C158.257411,146.290368 160.004131,137.217594 160.004131,127.733184 L160.004131,127.613685 C160.004131,118.129275 158.257411,109.043534 155.089415,100.661566 C146.683802,97.5001809 137.576449,95.7600714 128.067377,95.7600714 Z"
        fill="#FF4A00"
        fillRule="nonzero"
      ></path>
    </g>
  </svg>
}
    href="/integrations/zapier"
    horizontal={true}
  />

  <Card
    title="Make"
    icon={
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="24"
    height="24"
    viewBox="0 0 512 512"
  >
    <g transform="translate(3757 -1767)">
      <circle
        cx="256"
        cy="256"
        r="256"
        fill="#FF4A00"
        data-name="Ellipse 10"
        transform="translate(-3757 1767)"
      />
      <path
        fill="#fff"
        d="M-3431.576 1919.969a7.187 7.187 0 0 0-7.186 7.192v192.191a7.19 7.19 0 0 0 7.186 7.192h52.063a7.187 7.187 0 0 0 7.186-7.192v-192.191a7.183 7.183 0 0 0-7.186-7.192Zm-152.714 2.539-86.296 171.712a7.191 7.191 0 0 0 3.192 9.654l46.514 23.379a7.184 7.184 0 0 0 9.654-3.2l86.3-171.711a7.184 7.184 0 0 0-3.2-9.654l-46.511-23.377a7.2 7.2 0 0 0-9.654 3.2m72.592.614-36.926 187.176a7.189 7.189 0 0 0 5.632 8.442l51.028 10.306a7.2 7.2 0 0 0 8.481-5.665l36.928-187.173a7.19 7.19 0 0 0-5.637-8.442l-51.03-10.306a7.391 7.391 0 0 0-1.427-.144 7.194 7.194 0 0 0-7.048 5.8"
        data-name="Path 141560"
      />
    </g>
  </svg>
}
    href="/integrations/make"
    horizontal={true}
  />

  <Card
    title="Clerk"
    icon={
  <svg viewBox="0 0 18 18" fill="none" aria-hidden="true">
    <ellipse
      cx="8.99999"
      cy="9"
      rx="2.81249"
      ry="2.8125"
      fill="#FF4A00"
    ></ellipse>
    <path
      fill="#FF4A00"
      d="M14.0674 15.6591C14.3067 15.8984 14.2827 16.2945 14.0015 16.4829C12.571 17.4411 10.8504 17.9999 8.9993 17.9999C7.14818 17.9999 5.42758 17.4411 3.99704 16.4829C3.71589 16.2945 3.69186 15.8984 3.93115 15.6591L5.98648 13.6037C6.17225 13.418 6.46042 13.3886 6.69424 13.5084C7.3856 13.8626 8.16911 14.0624 8.9993 14.0624C9.82948 14.0624 10.613 13.8626 11.3044 13.5084C11.5382 13.3886 11.8263 13.418 12.0121 13.6037L14.0674 15.6591Z"
    ></path>
    <path
      fill="#FF4A00"
      d="M14.0022 1.51706C14.2834 1.70539 14.3074 2.10155 14.0681 2.34084L12.0128 4.39619C11.827 4.58195 11.5388 4.61129 11.305 4.49151C10.6136 4.13733 9.83014 3.9375 8.99996 3.9375C6.20403 3.9375 3.93748 6.20406 3.93748 9C3.93748 9.83018 4.13731 10.6137 4.49149 11.3051C4.61127 11.5389 4.58193 11.827 4.39617 12.0128L2.34083 14.0682C2.10154 14.3074 1.70538 14.2834 1.51705 14.0023C0.558857 12.5717 0 10.8511 0 9C0 4.02944 4.02942 0 8.99996 0C10.8511 0 12.5717 0.55886 14.0022 1.51706Z"
      fillOpacity="0.5"
    ></path>
  </svg>
}
    href="/integrations/clerk"
    horizontal={true}
  />

  <Card
    title="Framer"
    icon={
  <svg
    xmlns="http://www.w3.org/2000/svg"
    xmlnsXlink="http://www.w3.org/1999/xlink"
    width="24"
    height="24"
    viewBox="0 0 98 148"
  >
    <path
      d="M 93.852 94.49 C 95.387 96.036 94.292 98.667 92.113 98.667 L 51.45 98.667 C 50.097 98.667 49 99.764 49 101.117 L 49 142.057 C 49 144.243 46.353 145.335 44.812 143.783 L 0.949 99.622 C 0.341 99.01 0 98.183 0 97.32 L 0 51.783 C 0 50.43 1.097 49.333 2.45 49.333 L 49 49.333 Z"
      fill="#FF4A00"
    ></path>
    <path
      d="M 49 49.333 L 4.148 4.177 C 2.613 2.631 3.708 0 5.887 0 L 95.55 0 C 96.903 0 98 1.097 98 2.45 L 98 46.883 C 98 48.236 96.903 49.333 95.55 49.333 Z"
      fill="#FF4A00"
    ></path>
  </svg>
}
    href="/integrations/framer"
    horizontal={true}
  />

  <Card title="View all ->" href="/integrations" horizontal={true} />
</CardGroup>
