I am trying to understand this API configuration and figure out what I am doing wrong. What is a ‘JSON Dictionary’ and can one be set up inside of the API plugin in Bubble?
The value of “customer_properties” needs to be the JSON dictionary:
{“$email” : “john.smith@example.com”}
or
{
“$email” : “john.smith@example.com”,
“$first_name” : “John”,
“$last_name” : “Smith”
}
Are my settings not correct? How do I put things inside of a ‘dictionary’ according to API supports recomendation?
API DOCS:
If you’re retrieving an order’s data, change “Use as Action” to “Use as Data” - you’ll still be able to leverage the call in workflows with “Get data from external API” but this allows you to retrieve data whereas action is more for creating/modifying. e.g. Getting order details vs Creating an order.
I tried that but to no avail. Still doesn’t pull any data for some reason.
Am I supposed to be setting these customer properties that are aparantly supposed to be in a “JSON dictionary” as parameters vs. headers maybe?
What is the difference between a header and a peramater?
This is the “coded” example below that I am supposed to be configuring in the plugin:
{
“token” : “API_KEY”,
“event” : “Placed Order”,
“customer_properties” : {
“$email” : "john.smith@example.com",
“$first_name” : “John”,
“$last_name” : “Smith”
},
“properties” : {
“$event_id” : “1234”,
“$value” : 29.98,
“Categories” : [“Fiction”, “Classics”, “Children”],
“ItemNames” : [“Winnie the Pooh”, “A Tale of Two Cities”],
“Brands” : [“Kids Books”, “Harcourt Classics”],
“Items” : [
{
“SKU” : “WINNIEPOOH”,
“Name” : “Winnie the Pooh”,
“Quantity” : 1,
“ItemPrice” : 9.99,
“RowTotal” : 9.99,
“ProductURL” : “http://www.example.com/path/to/product”,
“ImageURL” : “http://www.example.com/path/to/product/image.png”,
“Categories” : [“Fiction”, “Children”],
“Brand” : “Kids Books”
},
{
“SKU” : “TALEOFTWO”,
“Name” : “A Tale of Two Cities”,
“Quantity” : 1,
“ItemPrice” : 19.99,
“RowTotal” : 19.99,
“ProductURL” : “http://www.example.com/path/to/product2”,
“ImageURL” : “http://www.example.com/path/to/product/image2.png”,
“Categories” : [“Fiction”, “Classics”],
“Brand” : “Harcourt Classics”
}
]
},
“time” : 1387302423
}
I just took a quick look at the documentation, and you may need to send these in the parameters. I’ll be able to help out later today if someone else doesn’t jump in.
I got a hold of support who advised that they indeed do need to be paramaters, but it still doesn’t seem to want to work.
“If your plugin is not able to encode it’s requests to base64 and JSON, then you will have to use a different tool; or a custom script, leveraging our API libraries if you like (listed in the top right of the API doc).”
Can I encode in base54 and JSON?
Hi Justin,
Right now you have the following in the :
“customer_properties” : “john.smith@example.com”
This is incorrect. You must have the following:
“customer_properties” : {“$email” : “john.smith@example.com”}
All of the things you have written in your screenshot should be parameters, not headers. Additionally, the request must be base64 encoded, as per the API doc page you attached a screenshot of:
“Requests are made with a GET request to the specified endpoint with a single parameter, data, which is a base64 and JSON encoded string.” Track & Identify Endpoints: Overview
If your plugin is not able to encode it’s requests to base64 and JSON, then you will have to use a different tool; or a custom script, leveraging our API libraries if you like (listed in the top right of the API doc).
Best,
Sean
Now I have set up:
Update on this thread.
Can’t be done as the system won’t encode Base64.
But i reallyyy appreciate your help @romanmg 
Try changing the GET to POST, then you can put JSON in the post body.
See Nigel’s post here for base64 encoding:
If you look at the curl example on the linked API docs, you will see what you need to be doing.
So there is a single parameter “data” that is a set of base64 encoded JSON.
You should be able to test it out in POSTMAN by running the JSON through an online encoder (see above), then calling the API with a ?data=xxxxxx parameter where xxxx is the result of that encode.
Doing it in bubble is going to be interesting, however…
You should be able to build some JSON in a text input field, with dynamic fields in it.
Then push that field through an API that encodes in Base64 if you can find one. Or you could build one yourself using webtask.io (or Amazon Lambda etc) as there are loads of node.js modules that do this.
The issues isn’t doing base64 (most browsers do this natively anyway and it is available in most languages) it is finding a web service to do it reliably.
I will have a look later today to see if it is possible to do in a couple of lines and create a webtask. It tends to either work or it doesn’t and my javascript skills are not able to do anything more than call node.js modules.
If you’re doing this, i.e. if the timing is appropriate to use client functionality, may as well use the browser’s native javascript function:
btoa("hello there");
results in
"aGVsbG8gdGhlcmU="
Edits: got to be careful with non-english characters though.
For older browser support: https://cdnjs.com/libraries/Base64
I am interested in how you take some dynamic bubble data, run it through that browser function, and then make it available to send to the API via the Connector.
Additionally assuming that all the data being processed by the browser is allowed to be seen by the user … gets tricky if using private keys.
Brief outline of how it could work …
Bubble to javascript: HTML element, pass the data into function parameters with dynamic data.
Javascript to Bubble: javascript sets the value in an Input Text element, and flags it as changed. Bubble workflow event triggers on the change, and the Input’s value is available.
An similar implementation is in:
I have created a simple webtask to do the encode.
https://wt-nigel_godfrey-gmail_com-0.run.webtask.io/base64btoa?qtext=‘code this into base 64’
However getting it back into Bubble isn’t as easy, as it gets picked up as an array if you select JSON and if you select Text you get the double quotes front and back.
But that is probably fixable.
Ah, it pulls it back in from an input. I see now !
How did you set up WebTask.io if it requires a command line interface to interact with it?
Do you do this somehow in Bubble? (WebTask.io and this JSON encoding is brand new to me)
Webtask.io now has a web editor, so you don’t need to install node.js and the CLI any more.
What you end up with is a URL generated that you can call from Bubble.
I may be going crazy or something, but I can’t find any web editor anywhere.
In the getting started docs it says “The recommended way of using webtask is through the wtcommand line interface. Install the CLI”
Is this the correct website?
Yes, it is well hidden. No idea why they do this !
And then down the bottom you will see …
So … it is like those “funny” tests that teachers set that have 1. Read all the steps 2. Draw an elephant, 3. Make a noise like a motorboat … 25. If you have read this far sit quietly.
That will open the editor. Bottom left is …
“Webtasks” takes you to the list of all your webtasks (they don’t mention this, took me ages to find)… The URL is your API.
Top right is where you save your code, and then run it. The “Runner” it is like Postman or the Bubble API connector.
On my end, I browse the link, I only get to point #3 and i see you have a point #4.
This is the most bizarre thing I’ve seen a company do yet…
Thought I would add to this thread to help out anyone else looking.
Here is the editor and response from support.
Hi Justin
There are a few different ways.
One you can use our cli (https://webtask.io/docs/wt-cli), wt edit will open the editor. You can read about it in the linked page.
You can also use the make url, https://webtask.io/make will bring you into the editor to create a new task. This is not currently listed anywhere. We are doing an overhaul of our docs and it will be there.
Thanks!
Glenn
Good work
