git-subtree-dir: packages/graphics-components git-subtree-split: 247be9ce40bd338d3934534fb6392504a0cdc81f
37 lines
789 B
Text
37 lines
789 B
Text
import { Meta, Canvas } from '@storybook/blocks';
|
|
|
|
import * as SponsorshipAdStories from './SponsorshipAd.stories.svelte';
|
|
|
|
<Meta of={SponsorshipAdStories} />
|
|
|
|
# SponsorshipAd
|
|
|
|
Add a sponsorship ad to your page.
|
|
|
|
> **IMPORTANT!** Make sure ads are only used on dotcom pages, never on embeds.
|
|
|
|
```svelte
|
|
<!-- +page.svelte -->
|
|
<script>
|
|
import { AdScripts } from '@reuters-graphics/graphics-components';
|
|
</script>
|
|
|
|
<!-- Include AdScripts only ONCE per page for any type of ad -->
|
|
<AdScripts />
|
|
```
|
|
|
|
```svelte
|
|
<!-- App.svelte -->
|
|
<script>
|
|
import { SponsorshipAd } from '@reuters-graphics/graphics-components';
|
|
|
|
let { embedded = false } = $props();
|
|
</script>
|
|
|
|
<!-- Check if in an embed context! -->
|
|
{#if !embedded}
|
|
<SponsorshipAd />
|
|
{/if}
|
|
```
|
|
|
|
<Canvas of={SponsorshipAdStories.Demo} />
|