skills.rest
Taek-D
Taek-DCOMMUNITY
Explore all skills by this author →
GitHub

appintoss-banner-ad

Attach TossAds banner ads to AppsInToss mini-apps with a React hook and wrapper.

Updated Apr 12, 2026
Search Tags:#development#integration#banner#ads#web-framework#appsintoss
One-click install
npx skills add https://github.com/Taek-D/kbo_appintoss --skill appintoss-banner-ad
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: appintoss-banner-ad
Source: https://github.com/Taek-D/kbo_appintoss/tree/main/miniapp/.claude/skills/appintoss-banner-ad
Command: npx skills add https://github.com/Taek-D/kbo_appintoss --skill appintoss-banner-ad

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Streamline the integration of TossAds banner ads into AppsInToss mini-apps by providing a reusable, production-ready hook and wrapper that reduce boilerplate and ensure consistent ad behavior.

Core Features & Use Cases

  • Hook-based init: useTossBanner initializes the SDK once and exposes an attachBanner helper.
  • Banner wrapper: BannerAdWrapper renders the ad container, handles environment placeholders, and cleans up on unmount.
  • Environment-ready: DEV placeholder for local development and a clear path to production IDs.
  • Config-driven IDs: Ad group IDs supported for test and production environments.

Quick Start

Set up the wrapper in your page and supply a test ad group ID in development, then switch to production IDs for live builds.

Frequently Asked Questions about appintoss-banner-ad

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I integrate TossAds banner ads into an AppsInToss mini-app?▼

To integrate TossAds banner ads, use a dedicated React hook to initialize the SDK and a wrapper component to attach the banner, which enforces a 100% width container and handles lifecycle callbacks.

Does the TossAds banner integration support both web and React Native targets?▼

Yes, the TossAds banner integration works across both web and React Native targets, providing environment checks, DEV placeholders, and safe destruction on navigation for both platforms.

How do I display a placeholder banner ad during local development?▼

You can display a placeholder banner ad during local development by using the provided DEV placeholder feature, which activates automatically through environment checks when not using production ad IDs.

What are the layout constraints for banner ads in AppsInToss?▼

Banner ads in AppsInToss enforce a 100% width container and a fixed 96px height in fixed mode, ensuring consistent ad behavior and layout stability across mini-app pages.

Why does my banner ad not clean up when navigating between pages?▼

Banner ad cleanup on navigation requires safe destruction logic within the wrapper component, which automatically tears down the ad instance on unmount to prevent memory leaks and display errors.

Related Skills

Explore More Software Engineering Skills→
Taek-DTaek-D

appintoss-rewarded-ad

Implements rewarded/interstitial fullscreen ads in AppsInToss mini-apps via Toss Ads and AdMob integration.

Community
Advanced
wangx7wangx7

google-mobile-ads-banner

Implement Google Mobile Ads banner ads in Android and iOS apps.

Community
Intermediate
partme-aipartme-ai
610

uniapp-ad

Integrate and manage uni-ad banner, interstitial, and rewarded video ads in uni-app projects.

Official
Intermediate
HallinnaHallinna

presentational-container-pattern

Separate React application logic from view rendering into presentational and container components.

Community
Basic