Book call

Getting Started

My name is Tomer, the CEO of Bllush. While I don’t usually get involved in major coding, I decided to make an exception and to personally write the “Getting Started” to prove indeed how easy it is to use the API.

In this article, you will learn how to get started using Bllush’s API to consume content and build user experiences. Here is my final outcome after approximately 2 hours.

What you need:

  • You can use any development language or framework for this exercise. To show the simplicity, I decided to use vanilla PHP with Bootstrap for the frontend. Any other modern framework should allow you to get a similar outcome.
  • You do not need any developer account. Our sandbox environment is open for the public to play around with.

Components and entities within API

We have two main entities which are used throughout our API:

Bllush Entities

  • Content Unit (CU) the basic entity which represents a single piece of content (e.g. an image) and relevant metadata needed to power an experience. It includes the relation between the content and its tagged products.
    • CU.images holds the main image that will be shown with a thumbnail preview
    • CU.product_matches[] holds all the products which were matched from your product feed
    • CU.blogger contains data regarding the blogger who created the image 
      • CU.caption contains the textual information and description. This object contains a ‘text’ field and ‘author’ name and picture
  • Content Batch (CB) is an array of content units bundled together, that produces a new context. It consists of a list of CU’s with optional metadata such as the textual caption. By using this entity you will be able to combine multiple CU’s with the same theme in one view.
    • CB.content_units contains an array of content units
    • CB.captions contains textual data – title, subtitle and text and an object that contains data about the author of the article

How to pull content and build your first “Hello Content!” app

We want to create a new page which will display fashion outfits. Each outfit is tagged to matching products, which we will not display in this example. We will display the images in a Bootstrap grid similar to Instagram.

Final Result

1 – Receive an API key

An API key is needed to access content from the Bllush API. For this example, you will only need the sandbox API key shown below. For production uses, you will need a production one.

Sandbox API Key:

OGN3OCFSWXwxMjV8MTU3Nzg5MzU0NjkwNXxjZGMxMTM1NQ

 

2 –  Make connection and pull data

For this example, we will use one of the basic endpoints which will pull a list of images active on the account. Each image is a photo of a creator showcasing a fashion outfit.

The endpoint we will use is:

https://sandbox.bllush.com/experiences/get_cu_list/

 

For full documentation on the endpoint, refer to our API documentation 

I will then write some code to use a standard CURL request and attach the api_key as one of the headers.

CURL Response

If everything is successful, you should see an output of JSON data similar to below. Awesome!

3 – Parse data and display images

Now the fun part. In this example, I will use the Bootstrap grid system to display the images in a 3×3 grid like Instagram. First, I’ll import the Bootstrap functions and prepare my template. 

Then I will use the following code to iterate on the images and push them into columns. Each column will display the images.

After adding some titles and some padding between the images, this is my result:

4 – Add blogger details

An important part of the experience is for the end-user to understand that the images are from creators. Therefore, every instance where an image is shown, the accompanying creator username needs to be added. We will also add the profile photo, as is common in Instagram. Both the blogger name and image URL are available in the blogger section of the data.

5 – Make it pop with hover and zoom-in options

Now to make it truly pop. Will splash some more UI candies such as a light shadow when hovering over an image and a modal zoom-in when clicking the photo.

And there you have it.

Next Post: Guide: Complete The Look

Want to learn more?

Talk to one of our content experts!

Book a call