---
metadata:
  - name: generator
    content: Diplodoc Platform v5.55.0
alternate:
  - https://yandex.com/support/partner/en/web/recommendation-widget/html-css.md
  - https://yandex.com/support/partner/ru/web/recommendation-widget/html-css.md
  - href: en/web/recommendation-widget/html-css.md
    type: text/markdown
    title: Markdown version
  - href: ../../llms.txt
    type: text/markdown
    title: llms.txt
---
> **Documentation Index:** Fetch the complete configuration index at https://yandex.com/support/partner/en/llms.txt

# Design customization

{% note alert %}

By using the recommendation widget, you accept the risks outlined in the [Yandex Advertising Network Offer](https://yandex.ru/legal/yan_service_offer/?lang=en). Before you start configuring your ads, review the current legislation, including the requirements for mandatory ad elements and their size.

{% endnote %}


The widget may have the appearance of a **grid** made out of ad cards or as a **slider** (a horizontal scrollable feed). Slider cards can be scrolled through using gestures or customizable scrolling buttons.

You can pick and choose the elements to use in your ad in the card, such as the title, body text, image, and so on. Some elements are [mandatory](#required-elements) under advertising law and the terms of the Yandex Advertising Network. Other elements are optional: you can use them to make the ad seamlessly blend in with your site's design and increase the widget conversion rate.

Use the visual code designer to configure the widget's design: choose the **Design** section and click the **Code** tab.

We recommend using one of the preset templates on the **General** tab if you don't have any experience with HTML and CSS. If necessary, you can go to the **Code** tab and add the CSS styles used on your site.


## Widget template {#html}

The template determines which ad elements or recommendations will be displayed in the widget cell. Each element corresponds to its own HTML tag.


Here is a simple template that uses all the widget elements:

```html
<div class="wrapper">
  <div class="headline">Recommendation widget header</div>
  <ya-units-grid cols="${grid_columns}" rows="${grid_rows}">
    <div class="image"><ya-unit-image /></div>
    <div class="title"><ya-unit-title /></div>
    <div class="desc"><ya-unit-desc /></div>
    <div class="domain"><ya-unit-domain /></div>
    <div class="meta">
                      <ya-unit-category class="category"/><ya-unit-date class="date"/></div>
    <ya-unit-kebab />
  </ya-units-grid>
  <ya-recommendation-label />
</div>
```

You can use this to:

- Change the widget's appearance from a grid (`<ya-units-grid />`) to [a slider](*slider) (`<ya-units-slider />`).
- Add your own layout to the template.
- Swap elements or nest elements into other HTML tags.
- Remove elements you don't want displayed in the widget. For example, you can remove the publication date by deleting the `<ya-unit-date />` element.


{% note warning %}

The template must include the following elements: `<ya-units-grid />` or `<ya-units-slider />`. You cannot delete these elements as they are required for the widget to work properly. All elements using the format `<ya-unit-... />` must be located inside `<ya-units-grid />` or `<ya-units-slider />`.

Please be sure to follow the requirements laid out for the mandatory ad elements so that your ad complies with the [Rules of Participation in Yandex Advertising Network](https://yandex.ru/legal/partner/?lang=en) and advertisement law. Please keep in mind that ads for mobile apps and other ad types have different sets of required elements.

{% endnote %}


## Required ad elements {#required-elements}

As defined by the terms of the Yandex Advertising Network, these elements must always be in the widget:

<!-- source: en/_includes/native/required-elements-table.md -->
#|
|| **Element** | **HTML tag** | **Required ad element** | **Required mobile app ad element** ||
|| The “Ad” label and age restriction label | `<ya-unit-category />` | yes | yes ||
|| Menu icon | `<ya-unit-kebab />` | yes | yes ||
|| Ad title | `<ya-unit-title />` | yes | no ||
|| Domain | `<ya-unit-domain />` | yes | no ||
|| Price | `<ya-unit-price />` | no | yes ||
|| App name | `<ya-unit-app-name />` | no | yes ||
|| App icon | `<ya-unit-app-icon />` | no | yes ||
|#
<!-- endsource: en/_includes/native/required-elements-table.md -->

{% note info %}

If the ad has an age label and a warning, they are automatically added to the cell with the ad when the widget is rendered.

{% endnote %}


## CSS class styles {#css-style}

CSS classes have multiple formatting styles:
- `grid`: Grid.
- `grid-row`: Grid row.
- `grid-item`: Grid cell.
- `ya-units-slider`: Overall slider appearance.
- `ya-slider-item`: Card inside the slider.
- `unit-wrapper`: Recommendation.
- `unit-image`: A picture or video in a recommendation.
- `recommendation-label`: Widget label.

You can also create your own CSS classes and customize their styles.

## Widget design {#design-settings}

{% cut "Widget format" %}

The widget may have the appearance of a grid of a specific size or a slider (a horizontal scrollable feed). The grid is rendered with `<ya-units-grid />` while the slider is rendered with `<ya-units-slider />`. You can't use both of these elements within the same template.

  {% cut "Setting up the grid" %}

  <!-- source: en/_includes/native/grid-size.md -->
  The `<ya-units-grid>` element is used to draw the grid based on parameters specified in the **Grid size** fields. You can only change the grid size using these fields.

  Exception: if you need to display a different grids for different screen sizes, specify the corresponding values in the `sizes.` parameter. The `${grid_columns}x${grid_rows}` valuables must be listed last. For example:

  **HTML**

  ```html
  <ya-units-grid sizes="(max-width: 1024px) 2x2, (max-width: 600px) 2x1, ${grid_rows}x${grid_columns}">
  ```

  Here is how grids are going to be matched to different screen sizes in this example:

  - A 2 × 1 grid will be displayed on screens less than 600 pixels wide.

  - A 2 × 2 grid will be displayed on screens between 601 and 1024 pixels wide.

  - Screens wider than 1025 pixels will display a grid based on the values set in the **Grid size** fields on the **General** tab.

  The grid layout is configured via CSS classes `grid`, `grid-row`, and `grid-item`. For example:

  **CSS**

  ```css
   .grid-row {
     margin-top: 10px; /* vertical distance between cells — 10 pixels */
   }
   .grid-item {
     margin-left: 20px; /* horizontal distance between cells — 20 pixels */
   }
   .grid {
     border: 1px solid #000; /* border around the grid: thickness — 1 pixel, border type — solid, color — black */
   }
  ```
  <!-- endsource: en/_includes/native/grid-size.md -->

  {% note warning %}

  Keep in mind that you should set the number of displayed widget cells in HTML code. To specify the number of recommendations and ad places to load, change the values in the **Grid size** fields. For example, if you set the **Grid size** to 5 × 2 while the `<ya-units-grid>` element is configured to display a 2 × 2 grid for this screen size instead, then only 4 out of 10 loaded recommendations will be displayed. The opposite is also possible: if you have a 5 × 2 grid while the number of recommendations is set to 2 × 2, then the widget will display six empty cells.

  {% endnote %}

  {% endcut %}

  {% cut "Setting up the slider" %}

  The slider is rendered with the element `<ya-units-slider />`.

  <!-- source: en/_includes/native/slider-features.md -->
  Example of a slider template:

  ```html
  <div class="block">
    <div class="headline">See also</div>
    <ya-units-slider>
      <div class="unit">
        <ya-unit-kebab />
        <div class="image">
          <ya-unit-image ratio="0.5" />
        </div>
        <div class="body">
          <div class="title">
            <ya-unit-title />
          </div>
          <div class="meta">
            <span class="category">
              <ya-unit-category />
            </span>
            <span class="date">
              <ya-unit-date />
            </span>
          </div>
        </div>
      </div>
    </ya-units-slider>
    <div class="block-label">
      <div class="label">Yandex recommendations</div>
    </div>
  </div>
  ```

  The slider design can be customized in CSS using the classes `ya-units-slider` (overall slider appearance) and `ya-slider-item` (a specific card within the slider):

  ```css
  .ya-units-slider {
    width: 95vw;
  }
  .ya-slider-item:not(:first-child) {
    margin-left: 1em;
  }
  ```
  <!-- endsource: en/_includes/native/slider-features.md -->

  You can add a recommendation scrolling button to your slider. To do, find the element `<ya-units-slider>` and add the element `<ya-slider-button>`. The scroll direction is indicated with the `direction` attribute:

  - The `left` value sets scrolling to the left. The scroll button will be placed before the cells in the slider.
  - The `right` value determines scrolling to the right. The scroll button will be located after the slider cells.

  <!-- source: en/_includes/native/slider-features.md -->
  Example of a slider template:

  ```html
  <div class="block">
    <div class="headline">See also</div>
    <ya-units-slider>
      <div class="unit">
        <ya-unit-kebab />
        <div class="image">
          <ya-unit-image ratio="0.5" />
        </div>
        <div class="body">
          <div class="title">
            <ya-unit-title />
          </div>
          <div class="meta">
            <span class="category">
              <ya-unit-category />
            </span>
            <span class="date">
              <ya-unit-date />
            </span>
          </div>
        </div>
      </div>
    </ya-units-slider>
    <div class="block-label">
      <div class="label">Yandex recommendations</div>
    </div>
  </div>
  ```

  The slider design can be customized in CSS using the classes `ya-units-slider` (overall slider appearance) and `ya-slider-item` (a specific card within the slider):

  ```css
  .ya-units-slider {
    width: 95vw;
  }
  .ya-slider-item:not(:first-child) {
    margin-left: 1em;
  }
  ```
  <!-- endsource: en/_includes/native/slider-features.md -->

  {% endcut %}

{% endcut %}

{% cut "Widget appearance" %}

To customize the widget's overall appearance (such as the text background color or margins), you need to wrap all of the ad unit's code in tags, set the class (for example, `wrapper`), and set up parameters for that class in CSS.

<!-- source: en/_includes/native/wrapper-code.md -->
**HTML**

```html
<div class="wrapper">
  <ya-units-grid cols="${grid_columns}" rows="${grid_rows}">
    ...
  </ya-units-grid>
</div>
```

**CSS**

```css
.wrapper {
  background: #fff; /* background color — white */
  padding: 10px; /* margins inside the border, all sides — 10 pixels */
  margin: 5px; /* margins outside the border, all sides — 5 pixels */
  border: 2px solid #000; /* border: thickness — 1 pixel, border type — solid, color — black */
  border-radius: 6px; /* round the border's corners after 6 pixels */
}
```
<!-- endsource: en/_includes/native/wrapper-code.md -->

{% endcut %}

{% cut "Restricting the number of rows displayed" %}

If you want to limit the number of rows displayed in the widget, wrap the element you need into the `<ya-clamp>` tag.

<!-- source: en/_includes/native/ya-styling.md -->
{% note alert %}

Do not limit the number of lines displayed in the title: it must be displayed in full according to advertising law.

{% endnote %}

**HTML**

The initial design for the “Ad offer description” element:

```html
<div class="desc"><ya-unit-desc /></div>
```

For the offer description, limit the number of displayed rows to two:

```html
<ya-clamp lines="2" class="desc"><ya-unit-desc /></ya-clamp>
```

Or

```html
<div class="desc"><ya-clamp lines="2"><ya-unit-desc /></ya-clamp></div>
```
<!-- endsource: en/_includes/native/ya-styling.md -->

{% endcut %}

<!-- source: en/_includes/native/ya-styling.md -->
{% cut "Text format" %}

You can use CSS to format your text. Choose the class of the element you wish to configure and change its values.

{% cut "Setting up the font and spacing" %}

**CSS**

```css
.headline {
  font-family: Helvetica, sans-serif; /* font */
  font-size: 18px; /* font size — 18 pixels */
  font-weight: bold; /* font thickness — bold */
  font-style: italic; /* font style — italics */
  line-height: 24px; /* line spacing — 24 pixels */
  letter-spacing: 1px; /* character spacing — 1 pixel*/
  text-decoration: underline; /* text decoration — underlined */
  text-transform: uppercase; /* text case — all uppercase */
  text-align: right; /* text alignment — right */
  color: #373e44; /* text color — dark gray */
  background: #fff; /* background color — white */
}

.category {
  color: #093; /* text color — green */
  font-size: 12px; /* font size — 12 pixels */
  text-transform: uppercase; /* text case — all uppercase */
}                        
```

{% endcut %}

{% cut "Configuring margins" %}

**CSS**

```css
.headline {
  padding-top: 10px; /* top margin — 10 pixels */
  padding-right: 10px; /* right margin — 10 pixels */
  padding-bottom: 10px; /* bottom margin — 10 pixels */
  padding-left: 10px; /* left margin — 10 pixels */
}
```

{% endcut %}

{% cut "Making a border around text" %}

**CSS**

```css
.headline {
  border: 1px solid #000; /* border: thickness — 1 pixel, border type — solid, color — black */
}
```

{% endcut %}

{% endcut %}


{% cut "Cell appearance" %}

You can use the `unit-wrapper` class to configure the background color or border for each cell. For example:

**CSS**

```css
.unit-wrapper {
  background: #fff; /* background color — white */
  border: 1px solid #666; /* border: thickness — 1 pixel, border type — solid, color — gray */
  padding: 5px; /* margins inside the border — 5 pixels */
  border-radius: 6px; /* round the border's corners after 6 pixels */
}
```

Cells that contain ads without images can have their own unique layout, which you can set using the `<unit-wrapper.unit-without-image>` class. For example:

**CSS**

```css
.unit-wrapper.unit-without-image {
  background: #fff; /* background color — white */
  border: 1px solid #666; /* border: thickness — 1 pixel, border type — solid, color — gray */
  padding: 5px; /* margins inside the border — 5 pixels */
  border-radius: 6px; /* round the border's corners after 6 pixels */
}
```

{% endcut %}

{% cut "Adapting your ads' appearance to fit your site design" %}

You can dynamically change your ad design to fit different site sections or visual themes (such as light or dark themes). To do this, add the `darkTheme: true` parameter to the ad tag, for example:

```javascript

```

When the code is called, the `<ya-units-grid>` or `<ya-units-slider>` root elements will receive the `ya-theme-dark` or `ya-theme-light` classes:

```html
<ya-units-grid cols="1" rows="1"> <!-- when calling the code, classes are added to the root element -->
  <div class="image">
    <ya-unit-image ratio="1" />
  </div>
</ya-units-grid>
```

Each ad unit can store one design layout with two color themes. To do this, go to the **Code** tab in the CSS settings and set the desired properties using these classes.

```css
.ya-theme-dark {
  background-color: black;
}                
.ya-theme-light {
  background-color: white;
}
```

The ad menu will also change depending on the theme. We don't recommend using `media queries` for your ad designs, because this method won't let the menu change to match the theme changes.

{% note info %}

We would normally use the `additionalClasses` and `nativeAdditionalClasses` parameters to make ads fit the site design. However, they will no longer be supported in the future.

{% endnote %}

{% endcut %}
<!-- endsource: en/_includes/native/ya-styling.md -->

{% cut "Widget label" %}

The `<ya-recommendation-label>` element in the HTML template is responsible for the label. If you delete the element from the template, the label won't appear in the widget. You can set your own label text using the text parameter. For example:

**HTML**
```html
<ya-recommendation-label text="Recommendations" />
```

The label is aligned to the right and uses the color gray by default. You can change this parameters by configuring the `recommendation-label` CSS class. For example:

**CSS**
```css
.recommendation-label {
  color: black; /* text color — black */
  text-align: left; /* align text to the left */
}
```

{% endcut %}


## Design of individual elements in recommendations or ads {#ad-elements-settings}

#### Menu icon in the ad

The user can hide or report ads using the ![](../../_images/common/kebab.png) menu icon. The menu icon is added to the upper-right corner of the ad.

In the HTML template, the `<ya-unit-kebab />` element sets the configuration of the menu icon. This element must be located directly inside `<ya-units-grid />` or `<ya-units-slider />`.


{% cut "Edit the menu icon" %}

The default menu icon is white with a semi-transparent sublayer. If you're going to render a label against a white background, try changing the icon color to black and removing the background. To do this, use the `ya-unit-kebab_contrast` class:

```html
<ya-unit-kebab class="ya-unit-kebab_contrast" />
```
You can set any other color for the icon using the `backgroundColor` parameter:

```html
<ya-unit-kebab backgroundColor="#000000"/>
```

{% endcut %}

#### Recommendation or ad category

If you don't want to see a certain category in your recommendations, add the `ad-only` parameter to the `<ya-unit-category />` element. Ad cells display the word “Ad” instead of a category, which can't be hidden: it's a required element.

You don't need to specify the CSS class for the `<ya-unit-category />` element, but you need one for the wrapper. This is done so that the “Ad” label is styled correctly when the category is missing (meaning it's not specified in the recommendation metatags or the `ad-only` parameter is used).

#### Images or videos in a recommendation or ad {#ya-unit-image}

To configure images or videos in the HTML template, use the `<ya-unit-image>` element. If you receive multiple images from the advertiser via the `<ya-unit-image>` tag, they will be displayed in the ad in the form of an image carousel. If there is no image carousel, a video or image will be displayed.

You can use this to:

- Set the aspect ratio using the `ratio` parameter (sets the height to width ratio).
- Enable adaptive aspect ratio for ad units with adaptive height using the `ratio="adaptive"` parameter. The image or video will be embedded without any restrictions and will take up at least 180 pixels but no more than 60% of the visible browser window area (without scrolling).
- Limit adaptive images and videos by height by setting a limit on the pixel count or the % of the visible browser window area. To do this, use the `max-height` parameter (example: `max-height="140"` or `max-height="40vh"`).
- Specify the path to a placeholder image (used in ad units if your ad doesn't have any images to display) with the `src` parameter.
- Fit a picture or video into a specified area without cropping by using the `variant="contain"` attribute (example: `<ya-unit-image ratio="0.5625" variant="contain" />`).

#### Advertiser information in the ad

You can add advertiser info to your ads:

{% cut "Site favicon" %}

<!-- source: en/_includes/native/add.md -->
You can add a favicon for the advertiser's website using the `<ya-unit-favicon />` element. In this case, place a solid white background under the favicon in order to avoid problems that arise when placing semi-transparent favicons against dark and complex backgrounds.

The favicon has a fixed size that can be set with the `size` parameter. Acceptable sizes: 32 × 32 and 120 × 120 pixels. The default size is 32 × 32.

If the favicon can't be displayed, you can display the ad image instead. To do this, specify the `allowImageFallback` attribute.

```html
<ya-unit-favicon size="32" allowImageFallback></ya-unit-favicon>
```

For cases where the ad doesn't have a logo, set a placeholder image in the `src` parameter. The placeholder image has zero height by default.

```html
<ya-unit-logo src="https://example.com/image/image.png" />
```
<!-- endsource: en/_includes/native/add.md -->

{% endcut %}


{% cut "Logo" %}

You can add the advertiser's logo to be displayed on your unit's ads using the `<ya-unit-logo />`element.

<!-- source: en/_includes/native/add.md -->
If the ad doesn't have a logo, it's replaced with other elements in the following order: favicon — image — placeholder. You can change this order in the `disabledSubstitution` parameter:

- `<ya-unit-logo disabledSubstitution="all" />`: Excludes both the favicon and the image. The logo is immediately replaced with a placeholder

- `<ya-unit-logo disabledSubstitution="favicon" />`: Excludes the favicon: the logo is replaced with an image, or a placeholder if no image is found.

- `<ya-unit-logo disabledSubstitution="image" />`: Excludes the image: the logo is replaced with a favicon or a placeholder if no favicon is found.
<!-- endsource: en/_includes/native/add.md -->

{% endcut %}

{% cut "Callouts" %}

<!-- source: en/_includes/native/add.md -->
You can add up to 8 [callouts](https://yandex.com/support/direct/efficiency/callout.html?lang=en) using the `<ya-unit-callouts />` element.

You can display only the first few callouts if you want: their number can be limited using the `limit` parameter.

Callouts can affect ad conversion. Make sure that the ad looks right with different callout numbers and lengths.

If ads located next to each other have a different callout length, number of callouts, or no callouts at all, their design should be fairly similar.

Callouts are not clickable.
<!-- endsource: en/_includes/native/add.md -->

{% endcut %}

{% cut "Sitelinks" %}

<!-- source: en/_includes/native/add.md -->
You can add [sitelinks](https://yandex.com/support/direct/efficiency/quick-links.html?lang=en) using the `<ya-unit-sitelinks />` element. Ads can contain up to 8 sitelinks. You can limit their number using the `limit` parameter.

```html
<ya-unit-sitelinks limit="2" />
```

When configuring ad design, keep in mind that the maximum length of a sitelink is 22 characters, and the total length of all sitelinks can't exceed 66 characters.

Sitelink design should clearly stand out from other elements of the ad: it should be clear to the user that this is an extra way to get to the advertiser's site. The user should be able to clearly distinguish sitelinks from each other.
<!-- endsource: en/_includes/native/add.md -->

{% endcut %}

{% cut "Physical address" %}

<!-- source: en/_includes/native/add.md -->
Added using the `<ya-unit-address />` element.
<!-- endsource: en/_includes/native/add.md -->

{% endcut %}

#### Action button in the ad

<!-- source: en/_includes/native/action-button.md -->
You can add an action button to the ad using the `<ya-unit-direct-button />` element. Clicking the button will take the user to the ad link, which can significantly increase ad conversion.

The text displayed on the button is selected by the advertiser in Yandex Direct. The caption on the button can be as follows: “Learn more”, “More”, “To site”, or something else specified by the advertiser. Buttons can include domains and favicons. To make this text appear during ad rendering, set the special value `{BUTTON_CAPTION}` inside `<ya-unit-direct-button />`, such as:

```html
<ya-unit-direct-button><div>{BUTTON_CAPTION}</div></ya-unit-direct-button>
```

The user's browser will draw the element as `<div />`:

```html
<div class="ya-unit-direct-button"><div>Get a discount</div></div>
```
<!-- endsource: en/_includes/native/action-button.md -->

#### Publication date in the recommendations

The publication date is specified using the element `<ya-unit-date />`. You can change the date format:

```html
<ya-unit-date format="HH:MM dd-mm-yyyy" />
```

#### Dynamic asset

You can add a dynamic asset using the `<ya-unit-line-asset>` element. This element renders a single asset based on a strict fallback order: price, sitelinks, callouts, or ratings, depending on what is available. For example, if an advertiser doesn't add a price but includes sitelinks and callouts, the dynamic asset will display only the sitelinks — as many as can fit in one line.


{% cut "How it works" %}

![](../../_images/dynamic-add.svg)

{% endcut %}


The dynamic asset comes with a default layout, but you can customize it.

## Mobile app ad design {#rmp}

Mobile app ads have their own set of elements:

#### Required ad elements

{% cut "App name" %}

Added using the element `<ya-unit-app-name />`.

{% endcut %}

{% cut "App icon" %}

The app icon is handled by the `<ya-unit-app-icon />` element. The icon's aspect ratio is 1:1. You can also specify a placeholder image in case your ad doesn't have an icon, such as: `<ya-unit-app-icon src="https://someurl" />`.

{% endcut %}

{% cut "Price (with the currency symbol)" %}

Added via the `<ya-unit-price />` element.

{% endcut %}

#### Additional elements

{% cut "App rating" %}

Added using the element `<ya-unit-rating />`. Must be between 0 and 5. Looks like five gray star outlines, some of which are filled in yellow. The number of filled-in stars corresponds to the app's rating. Fractions are also supported (for example, a rating of 3.5 is displayed as 3.5 yellow stars).

To display the rating using the shortened format, use the `isShort`: `<ya-unit-rating isShort />` parameter. The rating will then be displayed to the user as one yellow star with the rating as a number next to it.


{% endcut %}

{% cut "App action button" %}

Looks like a button with text, such as “Install”, “Download”, and so on. Added via the element `<ya-unit-mobile-app-button />`, which is rendered as `<div />` with the specified text in the user's browser.

{% endcut %}

{% cut "Total number of ratings in the app rating" %}

Added via the element `<ya-unit-review-count />`. We recommend using this element together with the app rating.

{% endcut %}

When rendering mobile app ads, the ad elements are assigned the `.ya-unit-item-rmp` class, which you can use to customize the design of similar ads in CSS.

<!-- source: en/_includes/feedback-forms/common-buttons.md -->
## Contact support




<details>
    <summary class="button">Write to WhatsApp</summary>
    <img src="https://yastatic.net/s3/doc-binary/src/support/partner/qr-codes/gr-code-en-new.svg" style="width: 100%; display: block;"/>
    <a href="https://wa.me/74952583554?utm_source=yan&utm_medium=help&utm_campaign=en" style="display: block; text-align: left; margin-left: 18px; color: #5889FF;">Go to WhatsApp</a>
</details>

 <details>
    <summary class="button">Write to Telegram</summary>
    <img src="https://yastatic.net/s3/doc-binary/src/support/partner/en/qr-codes/qr-code-en-telegram.svg" style="width: 100%; position: relative; left: -18px; display: block;"/>
    <a href="http://t.me/YanSupport_Bot" style="display: block; text-align: left; margin-left: 18px; color: #5889FF;">Go to Telegram</a>
</details> 

<a href="https://yandex.ru/chat?context=%7B%22entrypoint%22%3A%22%7B%5C%22entrypoint%5C%22%3A%5C%22help%5C%22%2C%5C%22a_pagename%5C%22%3A%5C%22partner-en%5C%22%7D%22%7D#/user/00155607-f40f-9af8-7910-84a29fd95914"> <!--ссылка, куда ведет кнопка. Если внутренняя ссылка, пишем без .md и .html --> 
  <span class="button">Write to chat</span> <!--текст на кнопке--> 
</a>


<a href="https://forms.yandex.com/surveys/10014803/?lang=en"> <!--ссылка, куда ведет кнопка. Если внутренняя ссылка, пишем без .md и .html --> 
  <span class="button">Send an email</span> <!--текст на кнопке--> 
</a>



<!-- source: en/_includes/feedback-forms/button-style.md -->

<!-- endsource: en/_includes/feedback-forms/button-style.md -->

<div width="100%" align="center"> 
<br><br>
You can also go to
<br><br>

[![](https://yastatic.net/s3/doc-binary/src/support/mobile-ads/en/logo/rsya.svg)](https://partner.yandex.com)

</div>

<div><br><br></div>
<div class="container" style="padding: 0;">
  <div class="column">
      <p style="font-size: large;">Useful links</p>
      <ul>
         <li><a href="https://yandex.ru/legal/partner/" target="_blank">Rules of participation</a></li>
         <li><a href="https://yandex.ru/legal/yan_service_offer/?lang=en" target="_blank">Yandex Advertising Network Terms of Offer</a></li>
      </ul>
  </div>   
</div>
<div><br><br></div>


<!-- endsource: en/_includes/feedback-forms/common-buttons.md -->

[*slider]: Horizontal scrollable recommendations feed.