Partner Resources

Affiliate Marketing Assets

Copy any embed snippet below and paste it directly into your site or blog. Each asset links back to ViviDoc.ai — append your referral code (?ref=YOUR_CODE) to any links you include alongside the embeds.

Vertical UGC Ad

SaaS Product Ad

Screenshot
in phone screen
Your Brand Speaker
Video Walkthrough
in phone screen
Vividoc.AI
on building signs
Vividoc
branded t-shirt
Vertical UGC Ad
See Inside this project
Make a Video like this

Embed code

<!-- Tailwind CSS + Alpine.js required in your page <head>:
<script src="https://cdn.tailwindcss.com"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3/dist/cdn.min.js"></script>
-->
<div class="relative bg-white rounded-2xl shadow-xl overflow-hidden border-2 border-gray-200 max-w-xs">
  <div class="relative h-[500px] flex items-center justify-center bg-gray-100">

    <!-- Bubble: Screenshot in phone screen -->
    <div class="absolute top-12 left-4 z-20 transition-opacity duration-1000"
         x-data="{ show: false }" x-init="setTimeout(() => show = true, 800)"
         :class="show ? 'opacity-100' : 'opacity-0'">
      <div class="px-3 py-2 bg-orange-100 text-xs font-medium rounded-full shadow border border-orange-200 whitespace-nowrap">
        Screenshot in phone screen
      </div>
    </div>

    <!-- Bubble: Your Brand Speaker -->
    <div class="absolute top-1/3 right-2 z-20 transition-opacity duration-1000"
         x-data="{ show: false }" x-init="setTimeout(() => show = true, 1000)"
         :class="show ? 'opacity-100' : 'opacity-0'">
      <div class="px-3 py-2 bg-blue-100 text-xs font-medium rounded-full shadow border border-blue-200 whitespace-nowrap">
        Your Brand Speaker
      </div>
    </div>

    <!-- Bubble: Video Walkthrough -->
    <div class="absolute top-1/2 left-3 -translate-y-1/2 z-20 transition-opacity duration-1000"
         x-data="{ show: false }" x-init="setTimeout(() => show = true, 1200)"
         :class="show ? 'opacity-100' : 'opacity-0'">
      <div class="px-3 py-2 bg-pink-100 text-xs font-medium rounded-full shadow border border-pink-200 whitespace-nowrap">
        Video Walkthrough in phone screen
      </div>
    </div>

    <!-- Bubble: Vividoc.AI on building signs -->
    <div class="absolute top-1/2 right-1 -translate-y-1/2 z-20 transition-opacity duration-1000"
         x-data="{ show: false }" x-init="setTimeout(() => show = true, 1400)"
         :class="show ? 'opacity-100' : 'opacity-0'">
      <div class="px-3 py-2 bg-green-100 text-xs font-medium rounded-full shadow border border-green-200 whitespace-nowrap">
        Vividoc.AI on building signs
      </div>
    </div>

    <!-- Bubble: Vividoc branded t-shirt -->
    <div class="absolute bottom-1 left-1 z-20 transition-opacity duration-1000"
         x-data="{ show: false }" x-init="setTimeout(() => show = true, 1600)"
         :class="show ? 'opacity-100' : 'opacity-0'">
      <div class="px-3 py-2 bg-purple-100 text-xs font-medium rounded-full shadow border border-purple-200 whitespace-nowrap">
        Vividoc branded t-shirt
      </div>
    </div>

    <iframe width="281" height="500"
      src="https://www.youtube.com/embed/O3JUpIlQ-4I?controls=1&modestbranding=1&rel=0"
      title="SaaS Product Ad — ViviDoc.ai"
      frameborder="0"
      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
      allowfullscreen loading="lazy">
    </iframe>

  </div>

  <!-- Badge label -->
  <div class="absolute top-4 left-4 px-3 py-1 bg-orange-600 text-white text-xs font-semibold rounded-full shadow">
    Vertical UGC Ad
  </div>

  <!-- CTA Button -->
  <div class="p-4 border-t border-gray-100">
    <a href="https://vividoc.ai/?ref=YOUR_CODE"
       style="display:inline-flex;width:100%;align-items:center;justify-content:center;padding:10px 16px;background:#2563eb;color:#fff;font-size:14px;font-weight:600;border-radius:8px;text-decoration:none;">
      Make a Video like this
    </a>
  </div>
</div>

Tip: pair with your referral link https://vividoc.ai?ref=YOUR_CODE

Featured Ad

Full 16:9 Marketing Ad Video

Featured Ad
See Inside this project
Make a Video like this

Embed code

<!-- Tailwind CSS required in your page <head>:
<script src="https://cdn.tailwindcss.com"></script>
-->
<div class="relative bg-white rounded-2xl shadow-xl overflow-hidden border-2 border-gray-200">
  <div class="h-96 flex items-center justify-center bg-gray-100">
    <video class="max-h-full max-w-full object-contain"
           width="888" height="500"
           controls preload="metadata"
           style="max-width:100%;display:block;">
      <source src="https://vividoc.ai/showcase/vividoc_youtube_169_video.mp4" type="video/mp4">
    </video>
  </div>

  <!-- Badge label -->
  <div class="absolute top-4 left-4 px-3 py-1 bg-blue-600 text-white text-xs font-semibold rounded-full shadow">
    Featured Ad
  </div>

  <!-- Links -->
  <div class="p-4 border-t border-gray-100">
    <a href="https://vividoc.ai/view-showcase/vividoc-demo"
       style="display:inline-block;margin-bottom:8px;font-size:13px;color:#6b7280;text-decoration:none;">
      See Inside this project →
    </a>
    <br>
    <a href="https://vividoc.ai/?ref=YOUR_CODE"
       style="display:inline-flex;width:100%;align-items:center;justify-content:center;padding:10px 16px;background:#2563eb;color:#fff;font-size:14px;font-weight:600;border-radius:8px;text-decoration:none;">
      Make a Video like this
    </a>
  </div>
</div>

Tip: pair with your referral link https://vividoc.ai?ref=YOUR_CODE

Daily Quick Channel Post

Stock Market Update — Square

Daily Quick Channel Post
Make a Video like this

Embed code

<!-- Tailwind CSS required in your page <head>:
<script src="https://cdn.tailwindcss.com"></script>
-->
<div class="relative bg-white rounded-2xl shadow-xl overflow-hidden border-2 border-gray-200 max-w-xs">
  <div class="h-[500px] flex items-center justify-center bg-gray-100">
    <video class="max-h-full max-w-full object-contain"
           width="400" height="400"
           controls preload="metadata"
           style="max-width:100%;display:block;">
      <source src="https://vividoc.ai/showcase/stock-signals_final_monologue_15s.mp4" type="video/mp4">
    </video>
  </div>

  <!-- Badge label -->
  <div class="absolute top-4 left-4 px-3 py-1 bg-pink-600 text-white text-xs font-semibold rounded-full shadow">
    Daily Quick Channel Post
  </div>

  <!-- CTA Button -->
  <div class="p-4 border-t border-gray-100">
    <a href="https://vividoc.ai/?ref=YOUR_CODE"
       style="display:inline-flex;width:100%;align-items:center;justify-content:center;padding:10px 16px;background:#2563eb;color:#fff;font-size:14px;font-weight:600;border-radius:8px;text-decoration:none;">
      Make a Video like this
    </a>
  </div>
</div>

Tip: pair with your referral link https://vividoc.ai?ref=YOUR_CODE

AI Interview

AI Progress Interview

AI Interview
See Inside this project
Make a Video like this

Embed code

<!-- Tailwind CSS required in your page <head>:
<script src="https://cdn.tailwindcss.com"></script>
-->
<div class="relative bg-white rounded-2xl shadow-xl overflow-hidden border-2 border-gray-200">
  <div class="h-96 flex items-center justify-center bg-gray-100">
    <video class="max-h-full max-w-full object-contain"
           width="888" height="500"
           controls preload="metadata"
           style="max-width:100%;display:block;">
      <source src="https://vividoc.ai/demos/showcase/ai-progress-interview/videos/ai-progress_final_interview_20s_caption.mp4" type="video/mp4">
    </video>
  </div>

  <!-- Badge label -->
  <div class="absolute top-4 left-4 px-3 py-1 bg-green-600 text-white text-xs font-semibold rounded-full shadow">
    AI Interview
  </div>

  <!-- Links -->
  <div class="p-4 border-t border-gray-100">
    <a href="https://vividoc.ai/view-showcase/ai-progress-interview"
       style="display:inline-block;margin-bottom:8px;font-size:13px;color:#6b7280;text-decoration:none;">
      See Inside this project →
    </a>
    <br>
    <a href="https://vividoc.ai/?ref=YOUR_CODE"
       style="display:inline-flex;width:100%;align-items:center;justify-content:center;padding:10px 16px;background:#2563eb;color:#fff;font-size:14px;font-weight:600;border-radius:8px;text-decoration:none;">
      Make a Video like this
    </a>
  </div>
</div>

Tip: pair with your referral link https://vividoc.ai?ref=YOUR_CODE

Hero Demo

Platform Demo

Hero Demo
Make a Video like this

Embed code

<!-- Tailwind CSS required in your page <head>:
<script src="https://cdn.tailwindcss.com"></script>
-->
<div class="relative bg-white rounded-2xl shadow-xl overflow-hidden border-2 border-gray-200">
  <div class="h-96 flex items-center justify-center bg-gray-100">
    <iframe width="560" height="315"
      src="https://www.youtube.com/embed/ODQs3vdbh-4?controls=1&modestbranding=1&rel=0"
      title="Platform Demo — ViviDoc.ai"
      frameborder="0"
      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
      allowfullscreen loading="lazy">
    </iframe>
  </div>

  <!-- Badge label -->
  <div class="absolute top-4 left-4 px-3 py-1 bg-indigo-600 text-white text-xs font-semibold rounded-full shadow">
    Hero Demo
  </div>

  <!-- CTA Button -->
  <div class="p-4 border-t border-gray-100">
    <a href="https://vividoc.ai/?ref=YOUR_CODE"
       style="display:inline-flex;width:100%;align-items:center;justify-content:center;padding:10px 16px;background:#2563eb;color:#fff;font-size:14px;font-weight:600;border-radius:8px;text-decoration:none;">
      Make a Video like this
    </a>
  </div>
</div>

Tip: pair with your referral link https://vividoc.ai?ref=YOUR_CODE

Service Promo

Done-For-You Service Demo

Service Promo
Learn more
Order Your Video Now

Embed code

<!-- Tailwind CSS required in your page <head>:
<script src="https://cdn.tailwindcss.com"></script>
-->
<div class="relative bg-white rounded-2xl shadow-xl overflow-hidden border-2 border-gray-200 max-w-xs">
  <div class="h-[500px] flex items-center justify-center bg-gray-100">
    <video class="max-h-full max-w-full object-contain"
           width="281" height="500"
           controls preload="metadata"
           style="max-width:100%;display:block;">
      <source src="https://vividoc.ai/demos/showcase/vividoc-done-for-you-demo/videos/saas_video_final.mp4" type="video/mp4">
    </video>
  </div>

  <!-- Badge label -->
  <div class="absolute top-4 left-4 px-3 py-1 bg-violet-600 text-white text-xs font-semibold rounded-full shadow">
    Service Promo
  </div>

  <!-- Links -->
  <div class="p-4 border-t border-gray-100">
    <a href="https://vividoc.ai/video-service?ref=YOUR_CODE"
       style="display:inline-block;margin-bottom:8px;font-size:13px;color:#6b7280;text-decoration:none;">
      Learn more about Done-For-You →
    </a>
    <br>
    <a href="https://vividoc.ai/video-service?ref=YOUR_CODE"
       style="display:inline-flex;width:100%;align-items:center;justify-content:center;padding:10px 16px;background:#7c3aed;color:#fff;font-size:14px;font-weight:600;border-radius:8px;text-decoration:none;">
      Order Your Video Now
    </a>
  </div>
</div>

Tip: the link above points to /video-service — great for agencies promoting the done-for-you offering.

Not an affiliate yet?

Apply to the Partner Program