Hello everyone, Im looking to build a text-to-voice synthesizer UI like the one on the ElevenLabs ( https://beta.elevenlabs.io/ ) homepage. The app already exists, but I’d like to know how I could make an API call from the Webflow frontend. Sorry not really technical so pardon me if the explanation falls short. Thanks
Hey Shaze,
a contact on Twitter had the same question for me; I will share the thread:
[Twitter contact]: I might have some work for you
I have a project where I need to integrate https://cloud.google.com/text-to-speech/ to a Webflow site. This has been done on this Webflow site - https://murf.ai/text-to-speech Looking at https://cloud.google.com/text-to-speech/docs/basics… it seems pretty straightforward but I’d rather an expert, such as yourself, connect it. Could you please give me a quote?
Me: May 9, 2023, 4:07 PM
Me: Hello [Twitter contact first name],
thank you so much for putting your trust in me as a potential subcontractor so quickly - I really appreciate it.
Right now I’m pretty busy with existing projects and in order to stay congruent with my current clients, I have to ask pretty directly: Would this be a project worth 10.000 (€) or more to you (as that is currently the minimum rate for new client engagements) - without going into details of the actual scope and timeline of the project.
– It seems like the Google Cloud is secured in a decent way (with API Bearer Keys). Security that could not be adequately met if only Webflow was used as the front end. I assume http://murf.ai uses a custom back-end.
Maybe Python, maybe NodeJS, or maybe even http://Xano.com. Either way. You definitely need some control over a back-end to make a service like Google Cloud’s Text to Speech work - because when you submit the input on http://murf.ai it first goes to their server, their server safely makes an API call to Google, Google returns an AI generated mp3, their server sends it back to the Webflow front-end, and some custom JavaScript renders and plays the mp3 file on the live Webflow project.
I would suggest http://Xano.com as the server. Simply because it’s very visual, flexible, no code, and still extremely powerful. But yeah. Might be more effort than it seems at first glance.
Hope this helps 
](https://twitter.com/messages/1521099312880566273-1590799255408713729/media/1655990466582544444)
May 9, 2023, 7:37 PM
[Twitter contact]: Hi Leon, thank you for the message - this is a small functionality that the client wanted to include to one of their landing pages, there isn’t much budget for this - certainly nothing close to 10k, I appreciate you being upfront. I have experience with Xano, would this still work without having to refresh the page?
May 9, 2023, 8:13 PM
Yeah. That’s okay. Thought that it might be considered just as a small feature 
– Yeah. Would still work without refreshing. You basically make a GET request to the Xano API endpoint of your choice with JavaScript (You can learn how the basics of that work in these videos → https://youtube.com/watch?v=HMsrFzoZYr0…, https://youtube.com/watch?v=CRFKHdpHzkU… ).
You’ll probably wanna use the JavaScript Fetch function → https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch…
And then you display / render the answer you got from Xano, following StackOverflow posts like this one → https://stackoverflow.com/questions/65380693/how-to-make-mp3-file-play-in-the-background-of-html-css-js-page…
Hope that helps
May 10, 2023, 12:20 PM
[Twitter contact]: Okay amazing, with you pointing me in the right direction + ChatGPT + some hair loss I might be able to figure this out 
May 10, 2023, 12:34 PM
Me: wish you well 
Next time maybe we can talk in advance about how to minimize hair loss on your end 
May 11, 2023, 7:24 PM
I hope this helps. It is a more advanced topic than it seems.
Wish u all the best @Shaze007
Thanks for sharing this. Definitely a way to go about it. Would speak more to the developers whose page Im working on so we could figure out a way , but thanks for sharing this info with me. really appreciate