Skip to content

Yellow ribbon banner for announcements

Marin Bratanov edited this page May 13, 2021 · 3 revisions

Announcements Banner

The announcements banner (a.k.a. Yellow Ribbon, Ribbon banner, Webinar banner, etc.) is now centralized and fetched from t.com and it is configured by the PMKs. It will be enabled automatically when one is enabled by the PMK of the specific product.

Specifics

The HTML and CSS is fetched from a centralized location and proxied via docs.telerik.com/kendo-api/announcements. It requires a parameter that is the baseUrl configuration of the documentation site (in the _config.yml) - e.g., https://docs.telerik.com/kendo-api/announcements/kendo-ui.

The banner will be shown only on first interaction with the page (e.g. mouse move).

The banner for the documentation sites features a close button that once clicked hides the banner until a new banner is set up by the PMK.

Note that the banner is expected to be a popup and to hide part of the page/site. This is to avoid page-speed-score drop. Plus, that way the awareness of the banner is raised and it has a close button to be hidden for better UX.

Using the announcements config as a fallback mechanism

If for some reason the centralized solution does not fetch (throws a response error in the console) the announcement required. You can add the old-fashion announcement to be shown as a fallback solution.

Add the desired HTML markup in the _config.yml file as a variable near its end, for example use the following (see also this sample commit that has the code commented out). Note the dash in the beginning and the scope setting - the syntax for that must be exact. Make sure to add an empty line before and after your content. Use only spaces for indentation. The HTML content must be in one single line.

- 
    scope:
        path: ""
    values:
        announcement: |
             Learn how to build Full-Stack C# apps with Telerik UI for Blazor and Entity Framework in no time. <a href="https://www.telerik.com/campaigns/blazor/wb-blazor-in-depth-webinar?utm_medium=internal&utm_source=yellowribbon&utm_campaign=blazor-webinar-weekofblazor" target="_blank">Save your seat</a>!

Override the URL endpoint from where the announcement to be fetched

If the automatic generation of the announcement URL fails you can override and set up a correct one from the _config.yml

- 
    scope:
        path: ""
    values:
        announcementUrl: "https://docs.telerik.com/kendo-api/announcements/the-correct-url"