Pricing Plans Popup

Use this to display pricing plans with different billing frequencies.

Overview

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

• 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.

• 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.

• 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: