Quick Start

Get your endpoint

You can create your own API on SparkLite. Follow the guide, create an account and get your endpoint.

e.g. Timezone Converter: https://excel.app.sparklite.io/ffee6625-5ddb-450a-8589-e2445e419e6c/api/v3/public/6d953e37-04fe-4484-b218-6bcadd833fc6

Install the plugin

To get started, open your Bubble app editor. Create an app if you don't have one. Navigate to the tab "Plugins". Click the button "Add plugin".

​Write a caption​

Search for "SparkLite API". Click the button "Install".

Make your first request

To make your first request, create a button to trigger the request and display the response results on the page with a state.

Create a button

Navigate to the tab "Design". Create a Button element. Click "Start/Edit workflow".

Add the API action

Add an action to the workflow. Search for "SparkLite API".

Add the endpoint

Add your API endpoint to the field "API endpoint".

Add the parameters

When the API is created on SparkLite, you will see a drilled down API details page. Follow the instruction there and add the inputs. For example, the Timezone Converter has four input parameters:

You can add these parameters as key/value pairs.

Make sure the name of the parameter is correct. Otherwise the action may return an error.

You can also add inputs with the field "inputs JSON". This allows you to add complex inputs with a valid JSON string.

Visit the demo editor to see how to use dynamic data in the inputs.

Get the outputs (response results)

Add an action "Set state of an element" after the action "SparkLite API". We are going to create a state on the page to display the outputs. Select "index" (the current page) for the field "Element". Create a new custom state and name it "outputs". Select state type "Text".

For the value, select "Result of step 1 (SparkLite API)" first. Then select "'s request_outputs".

Now the workflow is ready. When we click the button, this workflow will be triggered. The SparkLite API request will be sent and the response result will be saved in the state "index's outputs".

We need to add a text element on the page, so that we can see the result.

Add a text element

Navigate to the tab "Design". Create a text element. Insert dynamic data: "index's outputs". Make sure the text element is big enough to show the result.

Test your API

The setup is ready. Click the preview button to test it.

Congratulations, you have successfully integrated your SparkLite API into Bubble!

Visit the demo editor to see how to extract a value.