> ## Documentation Index
> Fetch the complete documentation index at: https://juo.io/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Quick actions

> Quick Actions in Juo Subscriptions let merchants embed one-click links in Klaviyo email campaigns, enabling customers to add products, resume, or update their subscriptions without logging in.

### Key Features

* **Quick Links**: Redirect customers to specific subscription management views.
* **Quick Actions**: Allow one-click subscription actions.

### Security

* Links and actions expire after 72 hours.
* Delegated tokens ensure secure access.

To access the properties that are available for each link or action, you need to add an Email action in Klaviyo and switch from the content editor to the preview mode as you set up the content. You can copy the properties from the preview back into the text fields in the content.

***

# Quick Links

Quick Links are used to direct customers to specific places in Juo Customer Portal. These links should be configured in Klaviyo using the keys provided below.

## Available Quick Links

* **View Subscription**
* **Add Products**
* **Edit Address**
* **Change Payment Method**
* **Change Billing Date**
* **Add Discount**
* **Change Shipping Method**

***

# Quick Actions

Quick Actions allow customers to perform specific tasks directly from their email. These actions include pausing, skipping, or renewing a subscription.

## Available Quick Actions

* **Pause**
* **Skip**
* **Renew Now**
* **Add Product**
* **Reactivate** cancelled subscription
* **Resume** paused subscription

## Add Product

The `AddProduct` feature can be used by your subscribers to easily add products included in Juo Upsell campaigns to their next renewal. Merchants can display product details such as the product's image, price, and title in the email.

Product properties can be found inside of the `Products` array. Each product entry contains the following fields:

* **AddProductUrl**: The URL for adding a product to cart.
* **Title**: The name of the product.
* **CurrentPrice**: The discounted price, if applicable.
* **BasePrice**: The original price of the product.
* **ImageUrl**: A URL for the product image.
* **VariantId**: The Shopify variant ID for the product.
* **AvailableForSale**: A boolean indicating if the product is in stock.

To display the image of the first product in the array, use the following key:

`{{ event.QuickActions.Products.0.AddProductUrl|default:'' }}`

Example email template that displays all items in the Upsell campaign:

```html theme={null}
{% if event.QuickActions.Products|length > 0 %}
  <table
    role="presentation"
    cellspacing="0"
    cellpadding="0"
    border="0"
    width="100%"
    style="font-family: sans-serif;"
  >
    <tr>
      <td style="padding: 20px 0; text-align: center;">
        <h2 style="margin-bottom: 20px;">Special Add-ons for Your Next Delivery</h2>
        {% for product in event.QuickActions.Products %}
          {% if product.AvailableForSale %}
            <table
              role="presentation"
              cellspacing="0"
              cellpadding="0"
              border="0"
              width="100%"
              style="margin-bottom: 30px; border-collapse: collapse;"
            >
              <tr>
                <td style="width: 100px; padding: 10px;">
                  <img
                    src="{{ product.ImageUrl|default:'' }}"
                    alt="{{ product.Title|default:'Product' }}"
                    width="100"
                    style="border-radius: 6px; display: block;"
                  >
                </td>
                <td style="padding: 10px; text-align: left; vertical-align: top;">
                  <p style="margin: 0; font-weight: bold;">{{ product.Title }}</p>
                  {% if product.CurrentPrice < product.BasePrice %}
                    <p style="margin: 4px 0;">
                      <span style="color: #999; text-decoration: line-through;">{{ product.BasePrice }}</span>
                      <span style="font-weight: bold;">{{ product.CurrentPrice }}</span>
                    </p>
                  {% else %}
                    <p style="margin: 4px 0; font-weight: bold;">
                      {{ product.CurrentPrice }}
                    </p>
                  {% endif %}
                  <a
                    href="{{ product.AddProductUrl }}"
                    style="display: inline-block; margin-top: 10px; padding: 10px 16px; background-color: #3727F4; color: white; text-decoration: none; border-radius: 4px;"
                  >
                    Add to next delivery
                  </a>
                </td>
              </tr>
            </table>
          {% endif %}
        {% endfor %}
      </td>
    </tr>
  </table>
{% else %}
  <p style="text-align: center;">No add-ons available at the moment.</p>
{% endif %}
```

***

## Klaviyo synchronization

Quick action parameters are sent to Klaviyo with each trigger:

* Started Subscription
* Paused Subscription
* Skipped Subscription
* Renewed Now Subscription
* Canceled Subscription
* Upcoming Renewal Subscription
* Billed Subscription
* Billing Failed Subscription
* Billing Requires Action Subscription
* Product Out Of Stock Subscription

For more information check our [Klaviyo integration guide](/klaviyo-integration)