# salla-advertisement (https://docs.salla.dev/twilight/react/web-components/salla-advertisement)



{/* Generated by scripts/sync-web-components.mjs from the components docs.json. Do not edit by hand. */}

Shows the store's active announcement bars (text, optional icon and link, with the merchant's background and
text colors) for the current page. Place it once near the top of the theme layout. It has no props and renders
nothing when there are no ads, and never in the native mobile app. When the customer clicks the close button the
ad is hidden with an animation and remembered in storage (key `statusAd-<id>`) so it does not return. In preview
or debug mode all active ads are shown regardless of dismissal. The close button has `aria-label="close-alert"`.

## Use it [#use-it]

In HTML or JSX, use the tag `<salla-advertisement>` with the **Attribute** names below. In React, the wrapper takes the **Property** names (camelCase).

```tsx
import { SallaAdvertisement } from '@salla.sa/twilight-components-react/advertisement';
```

**Client-only.** On the server this wrapper renders a placeholder (a skeleton, or nothing), and the real component mounts in the browser. Do not rely on it for content that search engines must see.

## Example [#example]

```tsx
import { SallaAdvertisement } from '@salla.sa/twilight-components-react/advertisement';

export function Example() {
  return (
    <SallaAdvertisement />
  );
}
```

```html
<salla-advertisement></salla-advertisement>
```

```tsx
import { SallaAdvertisement } from '@salla.sa/twilight-components-react/advertisement';

export function Example() {
  return (
    <SallaAdvertisement>
      <div slot="adv" className="my-ad">
        <a href="{url}" target="{target}">{'{'}description{'}'}</a>
      </div>
    </SallaAdvertisement>
  );
}
```

```html
<salla-advertisement>
  <div slot="adv" class="my-ad">
    <a href="{url}" target="{target}">{description}</a>
  </div>
</salla-advertisement>
```

## Slots [#slots]

| Slot  | Description                                                                                                                                                                                                                                                                           |
| ----- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `adv` | Replaces the markup of each advertisement. Placeholders: `{icon}`, `{url}`, `{target}`, `{description}`, `{bg_color}`, `{text_color}`. Each placeholder is replaced once, and the default markup also uses `{iconElem}`, `{urlElem}` and `{closeElem}` (icon, link and close button). |