# Buttons

We have four different button shortcodes:

1. [Register Button](#register-button)
2. [Signup Button](#signup-button)
3. [Signup with LinkedIn Button](#signup-with-linkedin-button)
4. [Button](#button)

***

### Register Button

The \[register\_button] shortcode is designed to make event registration accessible across various pages associated with an event. This shortcode can be used to display a registration button that dynami

#### How to use

Place the `[register_button]` shortcode on any event-related page where you want users to have access to the registration option. This includes:

* **Event main page**
* **Event sub-pages**
* **Sub-events**
* **Individual sessions**

{% hint style="info" %}
If your register button is placed incorrectly, a helpful message should appear explaining the issue.
{% endhint %}

#### Behaviour Across Event Hierarchy

The `[register_button]` shortcode rolls registration up to the highest level of the event hierarchy if required. This behavior is similar to the main "Register" button in the header.

For example, if a session is part of a **super-event** that requires registration, placing the `[register_button]` on the session page will display the **super-event registration** instead of the session registration, if you are not registered for the super-event.

**Example Hierarchy:**

* Super Event (requires registration)
  * Sub-event
    * Session

If `[register_button]` is placed on the **Session** page, it will display the registration form for the **Session** if you're already registered for the **Super Event**.

#### Additional Notes

#### Dynamic, Adaptive Behavior

The `[register_button]` shortcode is designed to be fully responsive, adjusting both its link and behavior based on the page context and user state—similar to the adaptive registration button in the site header.

* **Context-Aware Linking**: The button dynamically links to the appropriate registration page based on where it’s placed within the event hierarchy.
* **User-Sensitive Actions**: The button also adapts based on the user's login and registration status:
  * **Logged Out Users**: If the user is not logged in, clicking the button will trigger a sign-in prompt to ensure a seamless registration experience.
  * **Already Registered Users**: If the user is already registered for the event, the button will not display, avoiding unnecessary prompts.

This responsive behavior ensures that the `[register_button]` remains relevant and useful, providing only the actions the user needs at each stage of the registration process.

#### Styling 

The `[register_button]` can be styled through CSS if customizations are needed to match your theme.\
\
If you wish to change the alignment or width of your button, please utilise the advanced settings of the block in which it is located. 

***

### Signup Button

The **Sign-up Button** and the **Sign-up CTA Button** is used for guiding users to sign-up pages. It supports linking to external pages or the platform's sign-up page.

#### Parameters

<table><thead><tr><th width="144">Attribute</th><th>Description</th><th>Default Value</th><th>Example Value</th></tr></thead><tbody><tr><td>text</td><td>The text displayed on the button.</td><td>Sign up</td><td>Register Now</td></tr><tr><td>bg_color</td><td>The background color of the button.</td><td>(None)</td><td>#FF5733</td></tr><tr><td>link</td><td>The URL the button links to. Defaults to the platform's sign-up page with a redirect parameter.</td><td>signUpUrl() . '?on_auth_redirect_to=' . currentPageUrl()</td><td>https://example.com/register</td></tr><tr><td>target</td><td>Specifies where to open the link. If set, opens the link in a new tab (_blank).</td><td>_blank if link is provided; otherwise ''</td><td>_self</td></tr></tbody></table>

{% hint style="info" %}
The \[signup\_cta] also accepts the parameter image, so you can paste in the URL of an image you would like to display in the CTA.
{% endhint %}

**Behavior:**

* If the `link` is not provided, the button will redirect users to the platform's sign-up page with a redirect back to the current page upon completion.
* Supports customizable text and background color.

**Example Shortcode:**

```
[signup_button 
    text="Join Now" 
    bg_color="#4285F4" 
    link="https://example.com/signup" 
    target="_blank"]
    
[signup_cta
    text="Join Now" 
    bg_color="#4285F4" 
    link="https://example.com/signup" 
    target="_blank"]
```

***

### Signup with LinkedIn Button

#### Before starting this, please read our documentation on [LinkedIn Sign Up Setup](/integrations/linkedin-sign-up-setup.md).

#### Parameters

| Attribute | Description                       | Default Value       | Example Value |
| --------- | --------------------------------- | ------------------- | ------------- |
| text      | The text displayed on the button. | Sign upUSE Linkedin | Learn More    |

**Example Shortcode:**

```
[signup_with_linkedin_button
    text="Sign in with LinkedIn"]
```

***

### Button

The `[button]` shortcode is a flexible element designed for creating customizable buttons that can link to specific URLs.

#### Parameters<br>

| Attribute | Description                                                           | Default Value          | Example Value                  |
| --------- | --------------------------------------------------------------------- | ---------------------- | ------------------------------ |
| text      | The text displayed on the button.                                     | Sign up                | Learn More                     |
| bg\_color | The background color of the button.                                   | (None)                 | #007BFF                        |
| link      | The URL the button links to. Defaults to a local action when not set. | # (Local registration) | <https://example.com/register> |
| target    | Specifies where to open the link.                                     | '' (Current tab)       | \_blank                        |

**Example Shortcode:**

```
[button 
    text="Learn More" 
    bg_color="#FF5733" 
    link="https://example.com/learn" 
    target="_blank"]
```


---

# 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.wavecast.io/publishing/shortcodes/buttons.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.