Introducing Custom Shortcode
* Updated: 16.04.2024
Added V2 Button Types
Added Snippet Type
Hello everyone!
I thought it would be much easier to draft this in preview mode so that all of you can see it in action, inspect the post for future reference, and have it readily available when using shortcodes.
As stated in previous Slack conversations, I have implemented a custom shortcode. Since it cannot be used as a standalone element without any options, I thought it would be helpful to provide an overview of the recently implemented custom shortcode.
From now on, to generate custom shortcodes that follow the same format and design as previous ones, you can use the [cta:custom] shortcode.
You can specify two types of custom shortcodes: form (which includes an input field) and button.
Overview
To use a custom shortcode, you need to use the [cta:custom] shortcode with specific options. Using it as a standalone element will not work because you need to specify parameters such as the body, URL, labels, etc.
I will now get a bit technical, but please refer to the section below for real examples and usage instructions, which may make it easier to understand.
Shortcode options
-
type=> Can be eitherform,buttonorsnippet -
heading=> Accepts HTML to highlight certain keywords and/or place text on a new line / Accepts plain text when usinguseNewDesignor typesnippet -
body=> Plain text, available for theformandsnippettype and when thebuttontype is usinguseNewDesign. -
placeholder=> Plain text, specifies the text within the input field when nothing has been typed, available only for theformtype. -
cta_label=> Plain text, specifies the text within the button/CTA. -
url=> A plain URL (not formatted/linked within ButterCMS), which is the destination users should be redirected to. -
darkMode=> Boolean that determines if the shortcode should use the dark or light version. Only available for shortcodes that have typebuttonanduseNewDesignproperties present. (optional) -
useNewDesign=> Available only forbuttontype. Determines whether a new version of CTA should be used or not. (optional) -
title=> Available only forsnippettype.
URL Handling
Regarding the URL, you can add UTM tags, for example: https://example.com/?utm_medium=referral...
For the form type, when using a URL, the {value} placeholder should be included. The {value} will be replaced with the user-entered input within the shortcode. For example, if a user types "semrush" in the CTA input field, the {value} in the URL will be replaced with the encoded user input:
https://www.google.com/search?q={value}&utm_medium=referral → https://www.google.com/search?q=semrush&utm_medium=referral
Usage
To place a button CTA within a blog post, use the following format:
`[cta: custom type="button" heading="<html_text>" cta_label="<cta_text>" url="<url_to_open>"]`
To place a form CTA within a blog post, use the following format:
`[cta: custom type="form" heading="<html_text>" body="<body_text>" placeholder="<placeholder_text>" cta_label="<cta_label>" url="<url_with_value_string>"]`
To place a snippet CTA within a blog post, use the following format:
`[cta: custom type="snippet" heading="<plain_text>" body="<plain_text>" title="<plain_text>"]`
Note: I intentionally placed a space after cta: to prevent it from being parsed.
When using <html_text>, you can apply formatting such as:
-
<span>TEXT</span>to make TEXT orange. -
<br />to force text onto a new line.
Important note: When placing a URL, it should not be linked within ButterCMS.
Examples
Button type:
Form type:
Hello from custom form CTA!
This showcases the use of a form CTA.
Hello from custom
form CTA
This demonstrates the use of a form CTA with a properly formatted heading and utm tags.
V2 Button Examples:
Get SEO insights, fix issues, and grow with a FREE Semrush account.
Get more requests and unlock hidden results by starting a free Pro trial now
Get SEO insights, fix issues, and grow with a FREE Semrush account.
Get more requests and unlock hidden results by starting a free Pro trial now
You can place custom text here.
This is a CTA that opens semrush once button is clicked!
Feature Snippet Boxes:
Featured Snippet/Tips
How does SEO Works?
Crypto heists are big businesses for hackers these days. Long before crypto heists graced the cover of media publications, the traditional stock market has battled scammers and fraudsters for decades. The concept of a decentralized financial system - where every transaction is recorded and traceable.
Custom Snippet Title
Custom snippet heading
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
Calculator shortcodes
Note: I intentionally placed a space after cal: to prevent it from being parsed.
Usage: [cal: comp_keywords]
Result:
Usage: [cal: traffic]
Result:
Usage: [cal: aio]
Result:
Usage: [cal: freshness]
Result:
Content Freshness Impact Calculator
Estimate the potential traffic impact of updating your content
Monthly search volume for your target keyword
When was this content last significantly updated?
Usage: [cal: rank_time]
Result:
SEO Ranking Time Calculator
Estimate how long it will take to rank in Google's top 10
Number of monthly searches for your target keyword
Your website's domain authority score (1-100)
Leave as "Not ranking yet" if this is a new page
Usage: [cal: email_roi]
Result:
Test
Keyword Rank Checker:
Default (SEO category attached to this blog):
Test - site audit
Test - topics shortcodes
Here's a full list of available categories.
Stop Guessing, Start Growing 🚀
Use real-time topic data to create content that resonates and brings results.
Exploding Topics is owned by Semrush. Our mission is to provide accurate data and expert insights on emerging trends. Unless otherwise noted, this page’s content was written by either an employee or a paid contractor of Semrush Inc.
Share
Newsletter Signup
By clicking “Subscribe” you agree to Semrush Privacy Policy and consent to Semrush using your contact data for newsletter purposes
Written By
... Read more