Placement of Recommendations on the Webpage

Placement setting is required for recommendation blocks created in eSputnik account.

  1. Go to Placements, click New placement and select the page type.

  2. Placements tab with the New placement button open showing a dropdown of page types to select

    Enter the title. For convenience, use the page type and where on the page the recommendation will be placed.

  3. New placement form for Main page with the Title field filled in as Main page, under banner

    Use a CSS selector to specify the element you want to add a placement to.

  • Go to the page where the recommendation will be placed and click F12 to open the console. You can also open the console by right-clicking on the page and clicking Inspect.

  • Activate Select an element in the page to inspect it by clicking it.

  • Browser DevTools Elements panel with the Select an element to inspect icon circled in red

    Click the element relative to which the recommendation will be placed (before, after, inside the element).

  • Browser DevTools Elements panel with a promo banner element on the page highlighted and its corresponding HTML element circled

    Right-click the selected element and click Copy → Copy selector.

  • Browser DevTools context menu with Copy submenu open and Copy selector option circled

    Paste the copied CSS selector in the input field above.

  1. Placement on the website field with a CSS selector pasted in the input field

    Select where the recommendation will be placed relative to the selected element and click Done.

  2. Where to add a placement options with Before the element, After the element, Inside the element last, and Inside the element first, and After the element selected

    To assign the created placement to the recommendation, go to Recommendations and click the necessary recommendation in the general list. Click Parameters, and select the necessary placement in Placements.

    Animated demonstration starting from the Recommendations list showing a recommendation with no placement assigned

Did this page help you?