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?
• Troubleshooting

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/cta_panels_data.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 at the position the CTA panel should be rendered:

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 %}

Note: the if-else liquid statement 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.

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

Troubleshooting

The CTA panel in the Introduction is positioned incorrectly or missing

Add the Introduction CTA panel manually: Introduction CTA

The Overview CTA is positioned incorrectly, missing or the name of the control is incorrect

Note: Make sure to add the CTAControlName field in the page configuration

Add the Overview CTA panel manually: Overview CTA

Overview CTA or Introduction CTA appears instead of Rest of Pages CTA

Add the Rest of Pages CTA panel manually: Rest CTA

Overview CTA panel appears in pages inside subfolders of the control/component folder

Note: Better ping an owner of the docs-seed repo.

By default all overview.md inside controls folder are considered as overview articles. An exception for the particular suite can be made in the _data/cta_panels_data.yml file by adding a specific overview regex pattern.

For example:

https://github.com/telerik/docs-seed/blob/master/_data/cta_panels_data.yml#L12

Overview CTA panel does not appear for any of the control/component pages

Note: Better ping an owner of the docs-seed repo.

By default all overview.md inside controls folder are considered as overview articles. An exception for the particular suite can be made in the _data/cta_panels_data.yml file by adding a specific overview regex pattern.

For example:

https://github.com/telerik/docs-seed/blob/master/_data/cta_panels_data.yml#L70

https://github.com/telerik/docs-seed/blob/master/_data/cta_panels_data.yml#L18

The CTA panels are rendered, but there is no icon, the links are incorrect and the text is incorrect

Note: Better ping an owner of the docs-seed repo.

1. Check the _config.yml file and search for product field. e.g., https://github.com/telerik/xamarin-forms-docs/blob/master/_config.yml#L626
2. Check for other occurrences of product field with a different value. e.g., https://github.com/telerik/xamarin-forms-docs/blob/master/_config.yml#L639
3. Create a map in the _data/cta_panels_data.yml file with the values of the product field to match the suite name. Like so: https://github.com/telerik/docs-seed/blob/master/_data/cta_panels_data.yml#L108