# Where to use variables

Use variables to hyper-personalize your guideflows' content. You can use variables in different features such as call-to-actions, popup, and HTML.

(e.g. include "Click here {{first\_name}}" to personalize your hotspot content)

{% hint style="info" %}
A variable must have the following format: `{{first_name}}` 
{% endhint %}

### In call-to-actions

Use variables in your call-to-actions to make them dynamic and personalized through the call-to-action contents. 

(e.g. include your client's first name in your call-to-action content)

{% @guideflow/guideflow-embed requestedUrl="<https://app.guideflow.com/player/qp7wv6ijk3>" %}

* Edit your call-to-action (learn [how to edit call-to-actions](https://docs.guideflow.com/help/edit-your-guideflow/call-to-action-cta)).
* Click on "Add variables" below the text field.
* Select the variable you want to use (or [create a new one](https://docs.guideflow.com/help/variables/create-and-edit-variables)).&#x20;
* Add as many variables as needed.&#x20;

### In start/end popup

use variables in your start/end popup to make them dynamic and personalized through the popup contents.&#x20;

(e.g. customize the company's product name in your start/end popup content)

{% @guideflow/guideflow-embed requestedUrl="<https://app.guideflow.com/player/ok8yzmtxpw>" %}

* Edit your start/end popup (learn [how to edit call-to-actions](https://docs.guideflow.com/help/edit-your-guideflow/call-to-action-cta)).
* Click on "Add variables" below the text field.
* Select the variable you want to use (or create a new one by following [this article](https://docs.guideflow.com/help/variables/create-and-edit-variables)).&#x20;
* Add as many variables as needed.&#x20;

{% hint style="info" %}
Can be used either in the start/end popup with Button or the start/end popup with Form.
{% endhint %}

### In HTML

Use HTML with variables to customize the step appearance and content to create personalized guideflows.&#x20;

(e.g. customize the company's logo in your HTML content)

{% @guideflow/guideflow-embed requestedUrl="<https://app.guideflow.com/player/dkd52oi9rn>" %}

* Open the "HTML editor" tab on the right panel (learn [how to edit your HTML page](https://docs.guideflow.com/help/variables/broken-reference)).
* Select the HTML element you want to customize with variables.
* Click on "Add variables" below the text field.
* Select the variable you want to use (or [create a new one](https://docs.guideflow.com/help/variables/create-and-edit-variables)).&#x20;
* Add as many variables as needed.&#x20;

{% hint style="warning" %}
When you add variables, don't forget to include a space before the {{variable}}.&#x20;
{% endhint %}