-
Notifications
You must be signed in to change notification settings - Fork 21
Call To Action(CTA) panels
- 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
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.
The CTA panel for introduction and overview articles is positioned automatically before the first non-paragraph element after the first heading (# Heading). Or, if a paragraph is not found after the heading - it will be position directly after the heading.
Note: Make sure that in introduction articles you need to remove the Download button.
To enable the automatic rendering of CTA panels, you need to:
- Go to the
_config.ymlfile of your product's documentation repository - Set
has_cta_panels: true
Then, you just need to:
- Trigger the Jenkins build for your documentation and eventually
- Promote the result production, if the result in the test environment is correct
Voila, you have automatic CTA panels now :)
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-seedchannel in MicrosoftTeams
The data relies on the product name set in the
_config.ymlfile
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"
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:
{% if site.has_cta_panels == true %}
{% include cta-panel-introduction.html %}
{% endif %}
Note: For TestStudio you need to use
cta-panel-teststudio-introduction.htmlinstead
{% if site.has_cta_panels == true %}
{% include cta-panel-teststudio-introduction.html %}
{% endif %}
!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 %}
Note: For TestStudio you need to use
cta-panel-teststudio-overview.htmlwithout settingCTAControlName
{% if site.has_cta_panels == true %}
{% include cta-panel-teststudio-overview.html %}
{% endif %}
{% if site.has_cta_panels == true %}
{% include cta-panel-small.html %}
{% endif %}
Note: For TestStudio you need to use
cta-panel-teststudio-small.htmlinstead
{% if site.has_cta_panels == true %}
{% include cta-panel-teststudio-small.html %}
{% endif %}
Note: the
if-elseliquid 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.
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> %}insideifconditions, you need to go and remove all such instances manually
Add the Introduction CTA panel manually: Introduction CTA
Add the Introduction CTA panel manually: Introduction CTA
Make sure that the first heading is <h1> by checking the MD of the page and fixing the heading - ## Heading to # Heading.
Add the Rest of Pages CTA panel manually: Rest CTA
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
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.
- Check the _config.yml file and search for
productfield. e.g., https://github.com/telerik/xamarin-forms-docs/blob/master/_config.yml#L626 - Check for other occurrences of
productfield with a different value. e.g., https://github.com/telerik/xamarin-forms-docs/blob/master/_config.yml#L639 - Create a map in the _data/cta_panels_data.yml file with the values of the
productfield to match the suite name. Like so: https://github.com/telerik/docs-seed/blob/master/_data/cta_panels_data.yml#L108
You should disable the CTA panels for the Offline PDF documentation:
If there is already a
_pdf.ymlfile in the documentation just do step 2.
- Include a
_pdf.ymlfile in the same level as_config.yml - Disable the CTA panels by adding the following config:
#Disable CTA panels for PDF has_cta_panels: false - Change the build so that the new config file is added for the PDF documentation:
bundle exec jekyll build --config=_config.yml,_pdf.yml`