Docs

Carrd Integration Guide

Add Heyo live chat to your Carrd landing page. Perfect for solo founders and quick MVPs.

Try Heyo for Carrd →

This guide shows you how to add Heyo to your Carrd landing page.

Prerequisites

You need Carrd Pro (any tier) to add custom embeds.

Installation

Step 1: Add an Embed Element

In your Carrd editor, click the + button to add an element
Select Embed from the menu
Choose Code as the embed type

Step 2: Paste Heyo Code

In the embed code box, paste:

<script src="https://heyo.so/embed/script" defer data-project-id="YOUR_PROJECT_ID"></script>

Step 3: Configure the Embed

Style: Set to Hidden (the chat button will still appear)
Position: Doesn't matter since it's hidden
Click Done

Step 4: Publish

Click Publish to make your changes live. The chat widget will now appear on your landing page!

Best Practices

Placement

Since the embed is hidden, you can place it anywhere on your page. Common practice:

At the top of the page (loads early)
At the bottom of the page (doesn't interfere with design)

Multiple Carrd Sites

If you have multiple Carrd landing pages:

Use the same Project ID for consistent conversations across all pages
Or create separate Heyo projects for each landing page to segment conversations

Advanced Usage

Custom Trigger Button

Create a button that opens the chat:

Add a Button element in Carrd
Set the button link to #heyo
Add this in your embed code:

<script src="https://heyo.so/embed/script" defer data-project-id="YOUR_PROJECT_ID"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
  // Hide default chat button
  const style = document.createElement('style');
  style.textContent = '#heyo-widget-button { display: none !important; }';
  document.head.appendChild(style);
  
  // Custom button trigger
  const buttons = document.querySelectorAll('a[href="#heyo"]');
  buttons.forEach(button => {
    button.addEventListener('click', function(e) {
      e.preventDefault();
      window.HEYO?.show();
    });
  });
});
</script>