Cosmic JS Extensions Create custom experiences in your Bucket Dashboard. Pre-built Extensions are available for demo and install.

What Are Cosmic JS Extensions?

Cosmic JS Extensions enable you to customize the Cosmic JS Dashboard experience.

Getting Started

Go to Your Bucket > Extensions. Extensions are available for install to extend the functionality of your Bucket and you can also build your own.

Adding an Extension

1. Go to Your Bucket > Extensions > Add Extension

2. Either add an Extension that points to a URL (https required, X-Frame Options enabled) or upload a zip file that contains a static website.

How to Add an Extension via URL

You can add an Extension by URL (https required, X-Frame Options enabled), title and icon.

Query Parameters

After adding your Extension, query parameters are attached to the URL for easy connection to your Bucket. The format looks like this:
https://my-custom-webapp.netlify.com?bucket_slug=your-bucket-slug&read_key=your-read-key&write_key=your-write-key

How to Add a Static Website Extension

Add a static website Extension to your Bucket by uploading a zipped folder that includes at least the following required files:

extension.json
index.html

Extension Settings

Include an extension.json file to set information about your Extension. Add an optional Font Awesome icon to create a custom icon in the sidenav. Add an image URL as the thumbnail image next to your Extension. Example:

{
  "title": "Product Manager",
  "font_awesome_class": "fa-tags",
  "image_url": "http://this-is-your-thumbnail-url.xyz"
}

Optional Import Data

Along with the Extension info, you can import data to the destination Bucket. By adding an objects array, you are able to import Objects. By adding an object_types array, you are able to import Object Types.

{
  "title": "Product Manager",
  "font_awesome_class": "fa-tags",
  "image_url": "http://this-is-your-thumbnail-url.xyz"
  "objects": [
    {
      "title": "Product 1",
      "slug": "product-1",
      "type_slug": "products",
      "metafields": [
        {
          "title": "Image",
          "key": "image",
          "value": "1234asdf1234.jpg"
        },
        {
          "title": "Price",
          "key": "price",
          "value": "$12.99"
        }
      ]
    },
    {
      "title": "Product 2",
      "slug": "product-2",
      "type_slug": "products",
      "metafields": [
        {
          "title": "Image",
          "key": "image",
          "value": "4321asdf1234.jpg"
        },
        {
          "title": "Price",
          "key": "price",
          "value": "$14.99"
        }
      ]
    }
  ],
  "object_types": [
    {
      "title": "Products",
      "slug": "products",
      "singular": "Product",
      "metafields":[
        {
          "title": "Image",
          "key": "image",
          "type": "file",
          "value": ""
        },
        {
          "title": "Price",
          "key": "price",
          "type": "text",
          "value":""
        }
      ]
    }
  ]
}

Preparing Your Extension for Upload

The static site folder contents:
Compress the build folder:

Then upload the Extension to your Cosmic JS Bucket located in Your Bucket > Extensions > Add Extension.