# Pricing Plans Popup

## Overview

![](https://content.gitbook.com/content/BkgECRNg8RcsrMGCH9BI/blobs/1yyzOwyBOcCyCQBIsBgV/122.png)

Use this popup to display pricing plans with different billing frequencies.

## Structure

This popup includes the following:

* A hidden variable called **var - selection** that captures the user's current selection
* A title text and a collapsible description text that can be hidden.
* A toggle tabs group (**Group Main tab\_text**) with two inner tab options (**Group Inner tab 1\_text** and **Group Inner tab 2\_text**)
  * Clicking on each inner tab group will run a workflow to display the inner tab's group text (e.g. Monthly or Annually) in **Group Main tab\_text** and change the current tab view. 
  * Currently clicking on each tab will just change the "/month" and "/year" text in the repeating group.

![Conditional statement in a text element in the repeating group](https://content.gitbook.com/content/BkgECRNg8RcsrMGCH9BI/blobs/CT2gu6uT8JTWWdBuaiMZ/123.png)

* **RepeatingGroup Dummy** displays a list of things
* Clicking on **Button Cancel** and **Button Confirm** will close the popup

## How to set up

* Update the title and description text. 
  * You can hide the description text by selecting **Group Collapsible text** and unchecking the box for *This element is visible on page load*.
* Update the text data sources for **Group Inner tab 1\_text** and **Group Inner tab 2\_text**. Changing the name here will change the toggle tab text.

![](https://content.gitbook.com/content/BkgECRNg8RcsrMGCH9BI/blobs/FiAyI7n1pU9e9geJyYsq/124.png)

* Update **RepeatingGroup Dummy's** data source to the data type you want to display.
  * Update all the inner groups in the repeating group to the new data type
  * Select **Group Inner price\_number**, **Text Basic**, and **Text For hobbyists** and remove all conditional statements on those elements (these are placeholders).
  * Update **var - selection's** data source (this should be the same as the repeating group's data type).
* Add workflow to Button Confirm.

### How to display different content in each tab

* If you want to change a text in the repeating group when the current tab is changed, you should update that text element directly and use the `format as text: yes/no` logic.

![](https://content.gitbook.com/content/BkgECRNg8RcsrMGCH9BI/blobs/52Yhz6S4bqlBXV9RtX1G/125.png)

* If you want to display a completely different set of list for the other tab, you should add a conditional statement to the repeating group similar to the following:

![](https://content.gitbook.com/content/BkgECRNg8RcsrMGCH9BI/blobs/taGQComnzIh7zz40I8Tv/126.png)


---

# 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.airdev.co/canvas/5.1/canvas-library/popups/pricing-plans-popup.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.