วีดีโอ

Yes, the image can be sent in Base64 string.

No, not pycharm. It is JavaScript.

@@FarthinkAI Is webstorm best thing to download?

Thanks. Good to see the update. It looks like it needs API key to use it. In this video, we do not need the API key, and it is completely free.😀

You may save it in a database for long term storage. In the input element, add accept=".pdf" attribute to accept pdf only. You can copy the code to use it in your chatbot.

You may save it in a database for long term storage. In the input element, add accept=".pdf" attribute to accept pdf only. You can copy the code to use it in your chatbot.

Yes. AI can do that.

Make sure you have passed the correct personal token key and Airtale key.

You may watch this video: th-cam.com/video/_ppqwDna5f4/w-d-xo.html, showing how to use an API block to connect with Airtable. The method may change to POST.

If you type !==, it will automatically come out.

@@FarthinkAI thanks

Yes, will consider that.

You may check if the "buy product" button has the correct URL or it leads to other intents as desired.

Thanks for this! But do you know how I can build it into a more precise system that recommends products based on the category of the product that the user prefers?

After fetching the data from Airtable, you may select the products in the user preferred category to display in the dynamic carousel. This can be implemented with the help of AI or with a specific function.

@@FarthinkAI oh this sounds like a good idea, hope u can make a vid about it

github.com/voiceflow-gallagan/vf-extensions-demo/blob/c7a5eda8116dc915f0b85cf9014baeefe92a22c5/extensions.js

@@FarthinkAI sorry, i mean where do i copy that script to in voiceflow ? in which block ?

@@yessayan82 You can use a custom action block to implement the extension. The script needs to be in a different file and imported with the embed snippet.

Yes. Will make a video on this.

@@FarthinkAI Thank you very much!

Use the button code: buttons: [{ name: 'Buy Product', payload: { actions: [ {type: "open_url", url: PaymentLink} ] } }] To move to the next step, you can connect the function block with a message block to ask the user what they want to do next, and with choices or buttons to provide options.

The data is not fetched. Make sure the column names are capitalized at the first letter.

@@FarthinkAI Thank you for your channel and sharing your advanced technical skill with the voice flow community. My column names have capitals and i have been trying to get the code right. However, i feel a bit exhausted. Been at this for an hour now and a few days before that. Before I bought a template to make the dynamic card process easier but then air-table did some sort of update so that template didn't work. Something seems to always mess up. The code is different every time from content creators. I keep running things through chatgpt to fix and tried to copy that code you used from cursor ai but got error messages. Us beginners would gladly just pay you if you can make a process simple enough that a little kid or an old person could follow and get constant results. All the dynamic voice flow card tutorials seem like they are unstable to ppl new to javascript and voice flow functions. Sorry if i sound mean it's probably an issue with voice-flow as other platforms seem like they can implement this functionality easier but I just really like some of the demos they showed with dynamic cards and i really want to pull it off to look cool if possible, haha.

Sorry to hear that. I can feel your frustration. Cursor should work well at this case if we give it a good prompt with confined and explicit instructions. I think the prompt used in this video can accomplish this with the code patterns stored in the docs which Cursor can follow. The purpose of this video is to let users with no coding experience utilize Cursor to write code. If you follow along the video, Cursor should generate the code as shown in the video. Please make sure to follow the steps and use the prompt in the video. If possible, you may send the Cursor code to me and I will take a look.

@@FarthinkAI Wow, thank you so much! I will give it another go sometime next week and send you an email with the Cursor code, air-table screenshots, prompts, etc so you can tell/show me what I'm doing wrong 😅. Thank you again for being amazing!

You may check if the button is "open_url" type. If not, ask Cursor to fix it. It is an easy job for Cursor. 😀

********************* prompts Please follow the instruction here: @VF functions to write code to fetch the data from airtable, and save the records in the products array. Please include this information when making the API calls: "const tableID ="your Airtable ID"; const AirtableKey = "your Airtable token"; const url = "api.airtable.com/v0/" + tableID;" Please follow the carousel example code here: @Voiceflow trace types to Generate carousel items from the products. Map the Name, Content and Image attributes of product to "title", "description.text" and "imageUrl", respectively, and create buttons with name of "Buy Product" and "open_url" type with the url of product's attribute: "PaymentLink", then, save them to the "carouselItems" variable. Finally, Return an object of trace array containing an object with type and payload.cards of the generated carouselItems. Make sure to follow the carousel pattern.

Thank you!

Voiceflow works like that. We are just following their rules.

Yes, the url needs to be passed in a variable instead of a string. So a set block or javascript block is necessary.

@ If my use case involves static video responses that are already predefined and linked to specific questions or categories, do I still need to use a Set Block or variables to embed the video URLs, or can I simply use the Text Block with the direct embed URL?

You may watch this video: th-cam.com/video/8fi65X4zRNs/w-d-xo.html

It can be easily implemented by adding the reschedule and cancel buttons, and you may update the events in the KB with the specific user.

@@FarthinkAI Another question, what benefit does this have over the use of google calendar/calendly? Thanks for the quick response by the way

You may learn API from this webpage: docs.voiceflow.com/reference/api-overview

You can find the email address in the "About" of this channel, and contact us. Please let me know if you have further question.

@@FarthinkAII didn’t find it

Thank you! 😊

Thank you!

Thank you!

Thank you very much!😀

Not sure what you mean. It is all related. The first part showing the Voiceflow bot on the canvas. The second part is writing the code. If you want to skip the first part, you may go to the code part.

@@FarthinkAI I mean how to do the streaming coding part if I don't need the AI bot and employee Bot like your video?

This is an important topic, and we have a plan to make a video on it.

Usually Voiceflow generates the entire answer and displays it to the user, resulting that the user has to wait for a while to see it. It is better to have a ChatGPT style streaming because it can avoid an awkward silence especially if the answer is lengthy.

Yes. Use this code to disable the input: // Get the input element by its ID const inputElement = document.getElementById("text"); // Disable the input field inputElement.disabled = true;

@@FarthinkAI Thank you. does the voiceflow api work without upgrading the free trial? because i try the same as you show in this video but it doesn't working. So please answer this so i know what exactly happening .

@@shajibbarua-y7t It should work for the free version.

Use this code to disable the input: // Get the input element by its ID const inputElement = document.getElementById("text"); // Disable the input field inputElement.disabled = true;

Use this code to disable the input: // Get the input element by its ID const inputElement = document.getElementById("text"); // Disable the input field inputElement.disabled = true;

Thank you so much!

Yea, will think about that.

Yes. Will set up a link.

Click here to get the template: forms.gle/8E7xfqccKvVPQxnr9

Yes.

Thank you!

@@FarthinkAI can you add a link to the code you write afterward so that we can just copy and paste it? thankyou

OK, will set up a link.

@@thatonepoorguy5880 Please click this to get the template: forms.gle/8E7xfqccKvVPQxnr9

@@FarthinkAI awesome - i just sent you a request for the template

Yes. Please send a request to the channel email.

Yes. Please send a request to the channel email.

Sent.

Thank you!

@FarthinkAI i really mean it,i learnt alot of things from this channel,hope you hit 100k as soon as possible

@@rogermelton3554 I am so glad to heart that the channel helps. Appreciate it!👍

Yes. Please check out this: www.voiceflow.com/articles/wix-chat

If you use a computer, you can find it. Please let me know if you have further question.

Can you specify what problem you have? Just a reminder, for a video, it is better to use an extension. If it is a TH-cam video, is a good option.

@@FarthinkAI The audio and video part Voiceflow updated some of their features especially the set block it's not like yours in the video.

@@alawsbramwell5175 In the set block, you may set the url in the variable, select the "value" radio button, and enter the URL of the audio/video in the box.

Thanks so much!

Yes, I think so, because you can embed the VF chatbot on Whatsapp.

Yes. You may use this code: const buttonsToShow = [ ] product_variants.forEach((variant) => { buttonsToShow.push( { name: variant.title , request: { type: "variant_selected", payload: { price : variant.price } } }) }) buttonsToShowDynamicaly = JSON.stringify({"buttons": buttonsToShow});

@@FarthinkAI Thank you so much.

@@FarthinkAI I use this function: export default async function main(args) { const product_variants = [ { title: "T-Shirt - Blue - Size M", price: 19.99 }, { title: "T-Shirt - Blue - Size L", price: 19.99 }, { title: "T-Shirt - Red - Size M", price: 18.99 } ]; const buttonsToShow = []; product_variants.forEach((variant) => { buttonsToShow.push({ name: variant.title, request: { type: "variant_selected", payload: { price: variant.price } } }); }); return { trace: [ { type: "choice", payload: { buttons: buttonsToShow } } ] }; } It work well, but i dont know how can i product_variants as input for this function. Thank you

If you want to send the data from Voiceflow to Make, you may watch this video: th-cam.com/video/B9QjEnyc358/w-d-xo.html If you want to do both, you may set the Make webhook module with both "GET" and "POST", so that it is possible to fetch and send data.

Would like to know about this method too