---
title: "Campaign URL Builder Introducing the Shortcodes"
url: "https://alex.zappa.dev/blog/campaign-url-builder-introducing-the-shortcodes/"
description: "Introducing the first release of shortcodes for Campaign URL Builder plugin. Shortcodes can be customized with various attributes and can generate forms on the front-end. Bitly API key is required. Shortcodes can be styled and have optional parameters. Examples provided for simple, advanced, and PHP usage."
---

# Campaign URL Builder Introducing the Shortcodes

January 19, 2019

*   [#wordpress](/tags/wordpress/),
*   [#plugin](/tags/plugin/),
*   [#campaign-url-builder](/tags/campaign-url-builder/),
*   [#shortcodes](/tags/shortcodes/)

Today, I’m excited to introduce the first release of shortcodes for [Campaign URL Builder](/blog/wp-plugin-campaign-url-builder/) plugin.

Shortcode settings moved to new tab **Shortcode** on top tabs menu.

![Campaign URL Builder Shortcode Settings](/_astro/campaign-url-builder-shortcode-settings.C1VNNVG0_Z27yIWR.webp)

By default, shortcodes disabled, also if you use bulletin API key shortcodes also will be disabled.

Please use your API key for Bitly. How to find your Bitly API key, [read here](/blog/how-do-i-find-my-bitly-oauth-access-token/).

![Campaign URL Builder Shortcode Settings API Key](/_astro/campaign-url-builder-introducing-the-shortcodes.DUIxHK11_4cd78.webp)

_This is how default shortcode generate a form on front-end_

## How to use shortcode

1.  Setup your [Bitly API Key](/blog/how-do-i-find-my-bitly-oauth-access-token/).
2.  Enable Shotcode toggle in plugin settings.
3.  (optional) Enable shortcode for Anonymous visitor.
4.  Place shortcode (Campaign-URL-Builder) on target page.

### Styling

By default, shortcode styles have very basic styles, you can disable it and create your styles.

### Shortcode attributes

Attributes is optional and for your choice.

*   wrapper=”anyCssClass additionalClass”
*   wrapper-inline-style=”background: #ff0000; padding: 10px”
*   form=”anyCssClass additionalClass”
*   form-inline-style=”background: #ffff00; padding: 15px”
*   input-class=”anyCssClass additionalClass”
*   type=”preset”
*   campaign\_page=”[https://alex.zappa.dev/wp-plugin-campaign-url-builder/”](https://alex.zappa.dev/wp-plugin-campaign-url-builder/%E2%80%9D)
*   utm\_source=”reatlat\_homepage”
*   utm\_medium=”blogpost”
*   utm\_campaign=”Introducing shortcodes”
*   utm\_term=”serach key words”
*   utm\_content=”some content”
*   custom\_parameters=”key=value|key2=value|key3=value3″
*   hidden=”utm\_source,utm\_medium,utm\_campaign”

This is stock example, you can replace it like you want.

### Important to know.

If you use `type=”preset”` all fields which already have presented attributes will have read only attribute, and front end users can’t replace it.

The `custom_parameters`, you can pass only 3 couples. For example `my_param=someValue`. please separate couples by Vertical Bar.

The attribute `hidden` can contain the name of fields which you want to hide from front-end. For example, `hidden=”utm_source,utm_medium,utm_campaign”` in this case 3 input fields will be hidden for users.

Very soon, I will prepare the visual shortcode generator.

### Examples

Simple example

```
[Campaign-URL-Builder]
```

Advanced example

```
[Campaign-URL-Builder wrapper="MegaWrapperClass" wrapper-inline-style="background:#ccc;padding:15px;" form="MegaFormClass" form-inline-style="padding:10px; background:#c19393" campaign_page="https://alex.zappa.dev" utm_source="" utm_medium="" utm_campaign="" utm_term="" utm_content=""]
```

PHP example

```
<?php echo do_shortcode('[Campaign-URL-Builder]'); ?>
```

May the 4th be with you,  
Alex

*   [PreviousTransitioning Google URL shortener to Bitly](/blog/transitioning-google-url-shortener-to-bitly/)
*   [Next How do I find my Bitly OAuth access token?](/blog/how-do-i-find-my-bitly-oauth-access-token/)