Call To Action(CTA) panels

Table of Content

• What is the CTA panel?
• How to Enable CTA panel?
• How to Change CTA panel Avatar and Text?
• How to Change CTA panel position?
• How to Disable CTA panels?

What is the CTA panel?

The Call to Action panels are small portions of HTML on the page with the purpose of engaging new clients to go and start a Trial. For more technical details, you can check the description in https://github.com/telerik/docs-seed/issues/116

Note: Make sure that in introduction articles you need to remove the Download button.

How to Enable CTA panel?

To enable the automatic rendering of CTA panels, you need to:

1. Go to the _config.yml file of your product's documentation repository
2. Set has_cta_panels: true

Then, you just need to:

3. Trigger the Jenkins build for your documentation and eventually
4. Promote the result production, if the result in the test environment is correct

Voila, you have automatic CTA panels now :)

How to Change CTA panel Avatar and Text?

The text and avatar are controlled by the data in this repository, the _data/support_products.yml file.

Important: If you do not have permissions to submit a Pull Request with the updated content and avatar, share new content in the DevTools Team>Docs-seed channel in MicrosoftTeams

The data relies on the product name set in the _config.yml file

The options for avatar are Kendoka, DevCraft, and Ninja.

cta_panels_data:
  "ProducName":
    message: "Message after <Product is a>"  
    trial_url: "https://www.telerik.com/download-trial-file/v2-b/ui-for-asp.net-ajax" 
    product_url: "https://www.telerik.com/products/aspnet-ajax.aspx"
    avatar: "Ninja"

How to Change CTA panel position?

In case the position of the default panel is wrong or could be placed better, you can add the following code inside the .md file in question:

Note: the if is needed only for cases where you want to hide all CTA panels, automatic and manual, when the has_cta_panels is not set to true

• Introduction CTA:

{% if site.has_cta_panels == true %}
{% include cta-panel-introduction.html %}
{% endif %}

• Overview CTA: Note: Make sure to add CTAControlName field in the page config set to the exact name of the control that will show up in the Overview CTA panel

---
title: Overview
page_title: Overview | AutoComplete JSP Tag
description: "Get started with the AutoComplete JSP tag in Kendo UI."
slug: overview_autocomplete_uiforjsp
position: 1
CTAControlName: AutoComplete
---


{% if site.has_cta_panels == true %}
{% include cta-panel-overview.html %}
{% endif %}

• Rest CTA:

{% if site.has_cta_panels == true %}
{% include cta-panel-small.html %}
{% endif %}

How to Disable CTA panels?

The only thing you need to do is either remove has_cta_panels from your _config.yml file or set it to false

Note: If you did not wrap the manually added {% include <cta-panel-path.html> %} inside if conditions, you need to go and remove all such instances manually