We’re done with all the coding, so now it’s time to package up the element, upload it to a site, and test it out!

  1. Navigate to your local PriceChart directory, select all the contents, and create a zip file.
  1. In a web browser, open the Dev Admin portal and open the Dev Admin portal by clicking Developer Login.
  2. Click the app to open the app’s detail page.
  3. Click Upload New Version.
  4. Click Upload New Zip and select the zip file and click Upload Version. Your element now appears in the Version History area.

  5. Fill out the App Store Listing fields as follows:
    • Short Description: Create easy to read price charts
    • Key Features:
      • Create any number of plans and features
      • Multiple layouts
      • Configurable color scheme
    • Long Description: You can create price charts the reflect your price plans. Choose any number of charts and plans.
  6. For the graphic assets, upload the files from the assets directory you downloaded and unzipped from Git.
  7. Click Save Draft. Your element now appears in the Version History area.
  8. Click Pricing at the top of the page. Click the first Add Plan link and enter Free as the plan name. Select Free for the Plan Type and click Save.
  9. Hover over Get started and click Edit. Replace Get Started with Any number of plans and features, and remove the description text. Select Included from the dropdown. Click Done and then click Save.
  10. Click Versions at the top of the page to return to the version overview.
  11. Click the Create a Demo Site link. This creates a new site where you can build a page to showcase your app (you cannot change the domain of the site, but you can change the name). The site automatically has this version of the price chart app installed. Click Edit Site and create a page using the price chart element. Note that a tutorial opens because this is the first time it’s being used (you can find out more about creating a tutorial here). Dismiss the tutorial and view the element’s settings, including the tooltip you created. Add another element or two and then click Publish.
  12. Navigate back to the Dev Admin portal and on the Versions page, click View in App Center. A new tab opens and displays what your element will look like once posted to the App Center. Scroll down to view the features, descriptions, and price plan. Click the Live Demo button to view the demo site.

  13. Back on the Dev Admin portal tab, click Install to Dev Site, choose the version, and click Install.
  14. ​Open your test site, and you’ll see that the Price Chart now appears in the Editor’s sidebar. Note that a tutorial opens because this is the first time it’s being used (you can find out more about creating a tutorial here).

  15. Dismiss the tutorial and view the element’s settings, including the tooltip you created.
Your app in the editor
Your app in the editor