Embedding Components

Dynamic Ads

There are two ways to embed dynamic ads on your website:

Simple Embed

Copy and paste this code snippet for quick integration:

<!-- Option 1: All-in-one embed code -->
<dynamic-ad ad-id="your-ad-id"></dynamic-ad>
<script src="https://dynamicads.app/sdk.js"></script>
<script>
  DynamicAds.init();
</script>

Advanced Integration

For more control, you can separate the component and initialization:

<!-- Option 2: Separate initialization -->
<!-- In your HTML -->
<dynamic-ad ad-id="your-ad-id"></dynamic-ad>

<!-- In your <head> or at the end of <body> -->
<script src="https://dynamicads.app/sdk.js"></script>
<script>
  // Initialize with options
  DynamicAds.init({
    debug: true // Enable debug logging
  });
</script>

Dynamic Agents

To embed a dynamic agent with its associated ad:

<!-- Agent component with ad -->
<dynamic-agent agent-id="your-agent-id"></dynamic-agent>
<script src="https://dynamicads.app/sdk.js"></script>
<script>
  DynamicAds.init();
</script>

Multiple Components

You can use multiple components on the same page:

<!-- Using multiple components -->
<div class="ad-container">
  <dynamic-ad ad-id="first-ad-id"></dynamic-ad>
</div>

<div class="agent-container">
  <dynamic-agent agent-id="first-agent-id"></dynamic-agent>
</div>

<!-- Include SDK only once -->
<script src="https://dynamicads.app/sdk.js"></script>
<script>
  DynamicAds.init();
</script>

Usage Notes

The SDK script (sdk.js) only needs to be included once per page, even when using multiple components.
Always call DynamicAds.init() after including the SDK to initialize the components.
Components are responsive by default and will adapt to their container's width.
For optimal performance, load the script with the async attribute and initialize after the DOM is ready.
Components automatically handle all interactions and analytics tracking.
Find your ad and agent IDs in the Storage section of your dashboard after processing.