---
title: VPB Module | Button/CTA/Link [DRAFT]
description: This document contains the function that will be used in VPB modules to display Hubspot CTA, Button and Link.
image: https://internal.netfluencecorp.com/hubfs/7800x4320.svg
---
Netfluence Corporation
-
-
[](https://netfluencecorp.com/)
- SERVICES
- ABOUT US
- NEWS
- CONTACT US
## NETFLUENCE CORPORATION
# Knowledge Base
[Knowledge Base](https://internal.netfluencecorp.com/) / B. Development & Supporting Documentation / VPB Module | Button/CTA/Link \[DRAFT\]
# VPB Module | Button/CTA/Link \[DRAFT\]
Published: Nov 25, 2019 1:07:53 AM
**NOTE:**
**This is in document is still being worked on. You can post your comments on this card:** [https://app.hubspot.com/contacts/487227/deal/1149340271/](https://app.hubspot.com/contacts/487227/deal/1149340271/)
**Last Updated: 2019-11-26**
---
Below is a UI preview for the VPB Button/CTA/Link. You can use this as a reference whenever you're creating fields related to Hubspot CTAs, Buttons and Links in your VPB modules.
### UI Fields
| **Label** | **Field Type** | **Description** |
| --- | --- | --- |
| Add Call-to-Action? | Boolean Field | Allows users to add a Call-to-Action. |
| Button Type | Choice Field | Allows users to select from Hubspot CTA (default), Button or Link. |
| Hubspot CTA | CTA Selector Field | Allows users to select from a list of Hubspot CTA buttons/links (These buttons/links are created in Marketing > Lead Capture > CTAs). |
| Button Style | Choice Field | Allows users to choose a styling for the button (shows only if the selected Button Type is "Button"). |
| Label | Text Field | Allows users to add text that will be used as a button label or link text. |
| Link | Link Group Fields | Allows users to add different types of link-out (External, Content, File, Email Address or Blog) for the button or link. |
### **Hubl Implementation**
This macro outputs the choice given - Button, Link or Hubspot CTA - with the additional button styles. Please take note that this will only display on your page if the *is\_active* property is set to true.
The options to be passed on to this macro are in dictionary or dict format. Below is an example dict of the options to be sent to nf\_Cta macro.
| **Variable** | **Description** |
| --- | --- |
| choice | Accept values 'button' or 'link'. Element structure will be based on the set value. |
| cta | Hubspot CTA ID - value from the Hubspot CTA field. |
| url\_text | The label for the button or link. |
| classes | Additional classes for custom styling. |
| is\_active | Show/Hide. Will show element when set to 'true'. |
[<< Previous Post](https://internal.netfluencecorp.com/vpb/general-functionality-and-structure-of-vpb-modules) [Next post >>](https://internal.netfluencecorp.com/vpb/development-process)
### Recent Articles
- [Practial Exercise](https://internal.netfluencecorp.com/blog-post-practial-exrcisee)
- [Integromat as CRM Extension End point](https://internal.netfluencecorp.com/integromat-as-crm-extension-end-point)
- [Cloudbakers Header Navigation - How to change the link or redirection of a menu item in the Global Header Navigation Menu](https://internal.netfluencecorp.com/cloudbakers-header-navigation-how-to-change-the-url-of-menu-item-in-the-global-header-navigation-menu)
- [For CSS](https://internal.netfluencecorp.com/test-title)
- [VPB Module | Heading \[DRAFT\]](https://internal.netfluencecorp.com/vpb/module-heading)
### Company Newsletter:
Please Enter The Password:
Submit
Cancel
```json
{
"@context" : "http://schema.org",
"@type" : "Corporation",
"address" : {
"@type" : "PostalAddress",
"addressCountry" : "United States",
"addressLocality" : "North Bay Village",
"postalCode" : "33141",
"streetAddress" : "8000 West Drive #814"
},
"description" : "Netfluence helps marketing and sales teams execute the technical details of multi-touch campaigns, including custom templates, automation triggers, CRM workflows, sales processes, analytics tracking, and more.",
"image" : "https://cdn2.hubspot.net/hubfs/487227/netfluence_technical_support_for_marketers_final%20(1200x1200).png",
"logo" : "https://cdn2.hubspot.net/hubfs/487227/netfluence-hubspot-development-logo2.png",
"name" : "Netfluence",
"sameAs" : [ "https://www.facebook.com/netfluence/" ],
"telephone" : "+1954-637-8374",
"url" : "https://www.netfluencecorp.com/"
}
```