# Shortcode Parameters

<figure><img src="/files/sOPQpmAcF6XuZn6kgunQ" alt=""><figcaption><p>Click to Share Box</p></figcaption></figure>

The Click to Share box can be enabled via shortcode. Here's a simple shortcode in use below:

{% code overflow="wrap" %}

```
[has_click_to_share]This is some text I'd like to share.[/has_click_to_share]                
```

{% endcode %}

It'll produce a default Click to Share box like shown below:

<figure><img src="/files/ejH0qvz9O8ienHL5vWmn" alt=""><figcaption><p>Default Appearance of Click to Share Shortcode</p></figcaption></figure>

Here's a diagram of the various parts of the Click to Share box.

<figure><img src="/files/3tGn60B6UnR5NAKzKpF5" alt=""><figcaption><p>Diagram of Click to Share Box</p></figcaption></figure>

1. Click to Share text - This is the text that will be shared with the social networks.
2. Click to Share button text - This is the text that is displayed for the Click to Share button.
3. Click to Share icon - The icon used for the Cilck to Share button.

Here are the shortcode arguments available for the Click to Share shortcode box.

### unique\_id

Use this to wrap a unique ID around the shortcode, otherwise it'll be random.

### theme

Can be:

* default (light appearance)
* purple
* blue
* dark
* orange
* pink
* none (choose to define your own styles)
* custom-slug (see creating your own [Custom Shortcode Themes](/highlight-and-share/click-to-share-shortcode/custom-shortcode-themes.md)).

<div data-full-width="false"><figure><img src="/files/swr7vgKPqxZPikqTdFXB" alt=""><figcaption><p>Default Theme</p></figcaption></figure> <figure><img src="/files/b45MQO9HyRWInpWaXVc9" alt=""><figcaption><p>Orange Theme</p></figcaption></figure> <figure><img src="/files/H58YzO1rPHlEcGQraq1u" alt=""><figcaption><p>Dark Theme</p></figcaption></figure> <figure><img src="/files/lXTbCkLTGbR9HycatOmv" alt=""><figcaption><p>Blue Theme</p></figcaption></figure> <figure><img src="/files/S3MLKBgHcqXq5J3uqdJC" alt=""><figcaption><p>Purple Theme</p></figcaption></figure> <figure><img src="/files/hDCw8SjsV2zt3IejQgPY" alt=""><figcaption><p>Pink Theme</p></figcaption></figure></div>

### align

Can be:

* left
* center (default)
* right

### show\_click\_to\_share

Show the Click to Share section with text and an icon.

Can be:

* true (default)
* false

Example:

{% code overflow="wrap" %}

```
[has_click_to_share show_click_to_share="false"]This is some text I'd like to share.[/has_click_to_share]
```

{% endcode %}

### show\_click\_to\_share\_text

Show or hide the label in the Click to Share icon section.

Can be:

* true (default)
* false

Example:

{% code overflow="wrap" %}

```
[has_click_to_share show_click_to_share_text="false"]This is some text I'd like to share.[/has_click_to_share]
```

{% endcode %}

<figure><img src="/files/aIs4sB03mbC9X1Fqu6mQ" alt=""><figcaption><p>Click to Share With Sharing Label Hidden</p></figcaption></figure>

### show\_icon

Show or hide the icon in the Click to Share icon section.

Can be:

* true (default)
* false

{% code overflow="wrap" %}

```
[has_click_to_share show_icon="false"]This is some text I'd like to share.[/has_click_to_share]
```

{% endcode %}

<figure><img src="/files/CVHLPbVOl1m8obAlaWRC" alt=""><figcaption><p>Click to Share Section Without an Icon</p></figcaption></figure>

### icon

Determine which sharing icon will be used in the Click to Share box.

Can be:

#### has-share-1

<figure><img src="/files/B4R9FLJI08U5w1L36ew5" alt=""><figcaption><p>Icon: has-share-1</p></figcaption></figure>

#### has-share-2

<figure><img src="/files/RkY122DVwmrSzEPPrrZD" alt=""><figcaption><p>has-share-2</p></figcaption></figure>

#### has-share-3

<figure><img src="/files/K4Gnk7vFlaxOXPB17U0j" alt=""><figcaption><p>has-share-3</p></figcaption></figure>

#### has-share-4

<figure><img src="/files/8mrwF39pO4X8B02QhsJl" alt=""><figcaption><p>has-share-4</p></figcaption></figure>

#### has-share-5

<figure><img src="/files/u7zGtODbsUs7GZUKcAZl" alt=""><figcaption><p>has-share-5</p></figcaption></figure>

#### has-share-6

<figure><img src="/files/r3cnzkWO4gdXG7n1sFTI" alt=""><figcaption><p>has-share-6</p></figcaption></figure>

#### has-share-7

<figure><img src="/files/sVvwTIHuQYDYrgtaGAjr" alt=""><figcaption><p>has-share-7</p></figcaption></figure>

#### has-share-8

<figure><img src="/files/mnQ1nyXyl4437qdnCcZy" alt=""><figcaption><p>has-share-8</p></figcaption></figure>

#### has-share-9

<figure><img src="/files/mGiyBjCIScdG7DBhSBuL" alt=""><figcaption><p>has-share-9</p></figcaption></figure>

Example:

{% code overflow="wrap" %}

```
[has_click_to_share theme="purple" icon="has-share-9"]This is some text I'd like to share.[/has_click_to_share]
```

{% endcode %}

### icon\_size

Determine the icon size of the Click to Share icon section.

Can be:

* small
* medium (default)
* large

Example:

{% code overflow="wrap" %}

```
[has_click_to_share theme="pink" icon_size="large"]This is some text I'd like to share.[/has_click_to_share]
```

{% endcode %}

<figure><img src="/files/O1syHh1q6vvZaQ1iT287" alt=""><figcaption><p>Pink Theme With Large Icon Size</p></figcaption></figure>

### custom\_share\_text

Input text that will be shared instead of the wrapped sharing text.

Example:

{% code overflow="wrap" %}

```
[has_click_to_share custom_share_text="Share this instead"]This is some text I'd like to share.[/has_click_to_share]
```

{% endcode %}

### font\_family

Choose the font family that will be used for the Click to Share shortcode.

Can be:

* (or custom font family)

Example:

{% code overflow="wrap" %}

```
[has_click_to_share theme="purple" icon="has-share-9" font_family="Josefin Sans" button_font_family="Lato"]This is some text I'd like to share.[/has_click_to_share]
```

{% endcode %}

### button\_font\_family

Choose the font family that will be used for the Click to Share button.

Can be:

* (or custom font family)

Example:

{% code overflow="wrap" %}

```
[has_click_to_share theme="purple" icon="has-share-9" font_family="Josefin Sans" button_font_family="Lato"]This is some text I'd like to share.[/has_click_to_share]
```

{% endcode %}

### click\_text

This will change the Click to Share button text.

<figure><img src="/files/EbADIWU3phVrPXAku1fP" alt=""><figcaption><p>Custom Share This Text in the Button Area</p></figcaption></figure>

Example:

{% code overflow="wrap" %}

```
[has_click_to_share theme="purple" click_text="Share This!"]This is some text I'd like to share.[/has_click_to_share]
```

{% endcode %}

### margin

Specify the margin that'll be used for the Click to Share shortcode. This will override a theme default.

Default: empty.

Example:

{% code overflow="wrap" %}

```
[has_click_to_share margin="20px auto"]This is some text I'd like to share.[/has_click_to_share]
```

{% endcode %}

### padding

Specify the padding that'll be used for the Click to Share shortcode. This will override a theme's default styles.

Example:

{% code overflow="wrap" %}

```
[has_click_to_share theme="purple" padding="35px 45px"]This is some text I'd like to share.[/has_click_to_share]
```

{% endcode %}

### icon\_color, icon\_color\_hover

<figure><img src="/files/711FdlpxsoybJJBUrMxE" alt=""><figcaption><p>Custom Icon Color and Hover Color</p></figcaption></figure>

Set the default color and hover color of the Click to Share icon.

Example:

{% code overflow="wrap" %}

```
[has_click_to_share theme="purple" icon_color="#f58220" icon_color_hover="#e76f1a"]This is some text I'd like to share.[/has_click_to_share]
```

{% endcode %}

### text\_color, text\_color\_hover

Set the default and hover color value of the main body text in the Click to Share box.

Example:

{% code overflow="wrap" %}

```
[has_click_to_share theme="purple" text_color="#f58220" text_color_hover="#e76f1a"]This is some text I'd like to share.[/has_click_to_share]
```

{% endcode %}

### share\_text\_color, share\_text\_color\_hover

Set the default and hover color of the sharing button.

Example:

{% code overflow="wrap" %}

```
[has_click_to_share theme="purple" share_text_color="#f58220" share_text_color_hover="#e76f1a"]This is some text I'd like to share.[/has_click_to_share]
```

{% endcode %}

### background\_color, background\_color\_hover

Set the default and hover background color of the Click to Share box.

Example:

{% code overflow="wrap" %}

```
[has_click_to_share theme="default" background_color="#dee2e6" background_color_hover="#FFFFFF"]This is some text I'd like to share.[/has_click_to_share]
```

{% endcode %}

### font\_size

The font size of the sharing text in the Click to Share box.

Can be:

* small
* medium (default)
* large

Example:

{% code overflow="wrap" %}

```
[has_click_to_share theme="default" font_size="large"]This is some text I'd like to share.[/has_click_to_share]
```

{% endcode %}

### click\_share\_font\_size

The font size of the sharing button in the Click to Share box.

Can be:

* small
* medium (default)
* large

Example:

{% code overflow="wrap" %}

```
[has_click_to_share theme="default" click_share_font_size="large"]This is some text I'd like to share.[/has_click_to_share]
```

{% endcode %}

### border, border\_hover

Set the CSS border of the Click to Share box in normal and hover state.

Example:

{% code overflow="wrap" %}

```
[has_click_to_share theme="default" border="1px solid red" border_hover="1px solid black"]This is some text I'd like to share.[/has_click_to_share]
```

{% endcode %}

### border\_radius

Specify the CSS border radius of the Click to Share box.

Example:

{% code overflow="wrap" %}

```
[has_click_to_share theme="default" border_radius="10px"]This is some text I'd like to share.[/has_click_to_share]
```

{% endcode %}

### max\_width

The maximum width of the Click to Share box. Can be any valid CSS width.

Example:

{% code overflow="wrap" %}

```
[has_click_to_share theme="default" max_width="550px" border_radius="10px"]This is some text I'd like to share.[/has_click_to_share]
```

{% endcode %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.dlxplugins.com/highlight-and-share/click-to-share-shortcode/shortcode-parameters.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.