Testing Buttons

There is Javascript that controls the text and URL for links that are given the class of 'cf-recurly'. The Javascript will know what plan the button is for by looking at the 'plan' attribute of the link (e.g. 'Basic', 'Pro', 'Premium'). The button's text will change based on the current user's subscription status. There are three possible states:

  • User has no plan. It will change the button to use the text that is specified in its "signup" attribute.
  • User already has the same plan that's specified in the 'plan' attribute. It will change the button to use the text that is specified in its "current" attribute.
  • User has a different plan than is specified in the 'plan' attribute. It will change the button to use the text that is specified in its "change" attribute.

The visual style of the button is controlled via its 'class'. If you use a class of 'green-button', the button will look green. If you use a class of 'yellow-button', it will look like a yellow button.

I have provided a few examples, which you can see the HTML for in the edit form.

NOTE: The WYSIWYG editor will wipe out these custom attributes (e.g. 'plan', 'signup', 'change' and 'current'. I will try to see if there's a good way to let the WYSIWYG editor pass that text through. However, for now the edits must be made with the WYSIWYG editor disabled.

BASIC BUTTON

PRO BUTTON

PREMIUM BUTTON