How to call a third party API?

Ask the community
,
1

Hi! On my website, I have a dynamic page for each clinic we’re working with. I’d like the dynamic page to show the Yelp and Google ratings available for those clinics. Both Yelp and Google make it possible via APIs, but I can’t seem to be able to use those APIs in Corvid. I’ve tried to follow the explanation below, but I don’t get how to apply it to this need.
https://support.wix.com/en/article/corvid-accessing-third-party-services-with-the-fetch-api

For more context -
Yelp’s API: https://www.yelp.com/developers/documentation/v3/business
Google’s API: https://developers.google.com/places/web-service/details

Thanks!

2

Using the Google Place Details API (which you have listed above) you can only retrieve up-to 5 reviews.

You need to be white-listed by Google to use the Google My Business API which may allow retrieval of more reviews.

Yelp only allows retrieval of 5 reviews ( https://www.yelp.com/developers/documentation/v3/business_reviews )

I do not think in any case you can retrieve all the reviews of either Yelp or from your Google My Business account.

3

I’m actually not trying to retrieve the reviews, just the overall rating and the # of reviews (which is possible in both cases). For example - clinic A has a rating of 4.5 based on 140 reviews.

4

@maayan In that case I think a simple Fetch call will do.

You basically need to send a request to the external server (Google or Yelp) and then wait for their response. Something like below for Google:

Backend Code:

import {fetch} from 'wix-fetch';

const key = "XXXXXXXXXXXXXXXXX"; //your API key
const placeId = "ChXXXXXXXXXXXXXXX"; //place ID

const url = "https://maps.googleapis.com/maps/api/place/details/json?key=" + key + "&place_id=" + placeId;

export function google() {
 
 return fetch (url, {
        method: 'get'
        })
        .then( (httpResponse) => { 
 if (httpResponse.ok) {      
 return httpResponse.json(); 
        }
        })
        .catch( (err) => {
 return err;
        });
}

Page Code:

import {google} from 'backend/places.jsw';

$w.onReady(function () {
    google()
    .then( (response) => {
        console.log(response); //entire response
        let rating = response.result.rating;
        console.log(rating); //rating
        let totalRatings = response.result.user_ratings_total;
        console.log(totalRatings); //total number of ratings
    });
});

Once on the page you can use the response however you like.

You will need to study the Yelp API and use a similar format.

5

@shantanukumar847 Thanks! this helped me so much!!!
FYI - for future reference, if this helps anyone - since I’m using a dynamic placeID I made a small change :

Backend Code:

import {fetch} from 'wix-fetch';

const key = "xxxxxxxxxxxxxxx"; //my API key
let url; 

export function google(placeId) {
url = "https://maps.googleapis.com/maps/api/place/details/json?key=" + key + "&place_id=" + placeId;

 return fetch (url, {
        method: 'get'
        })
        .then( (httpResponse) => { 
 if (httpResponse.ok) {      
 return httpResponse.json(); 
        }
        })
        .catch( (err) => {
 return err;
        });
}

Page Code:

//Fetch google review - calls on BE function that we created in GoogleAPI.jws
import {google} from 'backend/GoogleAPI.jsw';

$w.onReady(function () {
    google($w('#doctors1').getCurrentItem().googlePlaceId)
    .then( (response) => {
        console.log(response); //entire response
 let googleRatings = $w('#ratingsDisplay2');
        googleRatings.rating = response.result.rating;
        console.log(googleRatings.rating); 
        googleRatings.numRatings = response.result.user_ratings_total;
        console.log(googleRatings.numRatings); 
    });
});
6

@shan, I was hoping you can help me with something else…

In Yelp, to authenticate with my API key I need to add to the header of the request:

Authorization: Bearer <YOUR API KEY>

So my backend code looks like this:

import {fetch} from 'wix-fetch';

const key = "xxxxxxxxx"; //my API key
Authorization: Bearer key; 
let url; 

export function yelp(bizId) {
url = "https://api.yelp.com/v3/businesses/" + bizId;

 return fetch (url, {
        method: 'get'
        })
        .then( (httpResponse) => { 
 if (httpResponse.ok) {      
 return httpResponse.json(); 
        }
        })
        .catch( (err) => {
 return err;
        });
}

but I’m getting a Parsing Error: Unexpected Token key. I tried to research if I’m using the “Authorization: Bearer” incorrectly, but this seems to be the right way. Any idea why I’m getting this Parsing Error?