Embedding Guide

Learn how to embed your contact cards on your website

← Back to Dashboard

Creator Feature

Embedding is available exclusively for Creator tier users.Upgrade to Creator to unlock this feature.

Quick Navigation

Getting Started Custom Styling Responsive Design Best Practices

Getting Started

Step 1: Get Your Embed Code

Go to your page editor for any existing contact page
Scroll down to the "Embed Code" section (Creator tier only)
Copy the provided HTML iframe code
Optionally set a custom background color first

Step 2: Add to Your Website

Paste the iframe code anywhere in your website's HTML where you want the contact card to appear:

<iframe 
  src="https://yoursite.com/embed/your-page-slug" 
  width="400" 
  height="600" 
  frameborder="0" 
  style="border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.1);">
</iframe>

Step 3: Test Your Embed

Save and publish your website changes
Visit the page to see your embedded contact card
Test the contact reveal functionality
Verify the custom background color appears correctly

Custom Styling

Background Colors

Set a custom background color in the page editor to match your website's design. The color you choose will be applied to the embedded contact card automatically.

Advanced Styling

You can customize the iframe's appearance with additional CSS styles:

<iframe 
  src="https://yoursite.com/embed/your-page-slug" 
  width="400" 
  height="600" 
  frameborder="0" 
  style="
    border-radius: 20px; 
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
    border: 2px solid #e5e7eb;
    margin: 20px 0;
  ">
</iframe>

Styling Options

Border Radius

border-radius: 12px;

Box Shadow

box-shadow: 0 4px 20px rgba(0,0,0,0.1);

Borders

border: 2px solid #e5e7eb;

Margins

margin: 20px 0;

Responsive Design

Mobile-Friendly Embedding

For responsive websites, wrap your iframe in a container for better mobile experience:

<div style="width: 100%; max-width: 400px; margin: 0 auto;">
  <iframe 
    src="https://yoursite.com/embed/your-page-slug" 
    width="100%" 
    height="600" 
    frameborder="0" 
    style="border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.1);">
  </iframe>
</div>

Recommended Sizes

Desktop

400px × 600px

Tablet

350px × 550px

Mobile

100% width × 500px

Best Practices

Test Before Publishing

Always preview your embed using the "Preview Embed" button before adding it to your live website.

Match Your Brand

Use the custom background color feature to ensure the embed matches your website's color scheme.

Strategic Placement

Place contact cards in high-visibility areas like your About page, footer, or sidebar for maximum effectiveness.

Keep It Updated

Your embedded contact card automatically reflects changes made in ContactCloak - no need to update the embed code.

Security Benefits

Embedded cards maintain full bot protection and analytics tracking, giving you insights into contact attempts.

Need Help?

If you run into any issues with embedding or have questions about customization, we're here to help!

Contact Support Back to Dashboard