Getting Started Guide

Introduction

The @apisurf/react-ad-preview library allows you to visualize how your ad content appears across different platform ad formats.

It covers platform ad previews for: Meta, Google, Bing, X, TikTok, YouTube, Reddit, Pinterest, Snapchat and more.

Installation

Install the package using your preferred package manager:

npm install @apisurf/react-ad-preview

Or with pnpm:

pnpm add @apisurf/react-ad-preview

Or with yarn:

yarn add @apisurf/react-ad-preview

Usage

Import the component you need and use it in your JSX:

import { AdGoogle } from "@apisurf/react-ad-preview";

<AdGoogle
  url="https://luxuryhomesflorida.com"
  headlines={[
    "Luxury Homes Florida",
    "Find Your Dream Waterfront Property",
    "Expert Real Estate Consultants",
  ]}
  description={[
    "Discover exclusive waterfront properties in South Florida. From Miami Beach to Palm Beach Gardens, find your perfect luxury home with our award-winning real estate team.",
    "Premium listings starting from $1.2M. Schedule a private viewing today. Virtual tours available for international buyers.",
    "Over 20 years of experience in luxury real estate. Full-service property management and concierge services available.",
  ]}
  sitelink={[
    "View Featured Listings",
    "Schedule Viewing",
    "Meet Our Team",
    "Property Management",
  ]}
/>

Available Components

The library provides ad preview components for the following platforms:

Search Ads

• AdGoogle - Google Search Ads
• AdBing - Bing Search Ads

Social Media Ads

• AdFbFeed - Facebook Feed Ads
• AdFbBusinessExplore - Facebook Business Explore Ads
• AdIgFeed - Instagram Feed Ads
• AdIgProfileFeed - Instagram Profile Feed Ads
• AdMetaReel - Meta Reel Ads
• AdMetaStory - Meta Story Ads
• AdLinkedIn - LinkedIn Ads
• AdReddit - Reddit Ads
• AdPinterestImage - Pinterest Image Ads
• AdPinterestVideo - Pinterest Video Ads
• AdSnapchat - Snapchat Ads
• AdTikTokTakeover - TikTok Takeover Ads
• AdTikTokTopview - TikTok Topview Ads
• AdXApp - X (Twitter) App Ads
• AdXWebsite - X (Twitter) Website Ads

Video Ads

• AdYoutube - YouTube Video Ads
• AdYoutubePlayer - YouTube Player Ads

Connected TV (CTV) Ads

• AdHuluCtv - Hulu CTV Ads
• AdMountainCTV - Mountain CTV Ads
• AdTatariCtv - Tatari CTV Ads

Explore the examples section to see each component in action with sample code.