Pierre, I cant thank you enough, we are non -coders and were learning some of this stuff and trying to create a similar website for last 2 weeks, but you made this so easy for us!
@@pierredemontaltedo you perhaps know a way though to hide the webhook somehow, since it’s now visible in the body? I’ve been investigating multiple options but none are non-complicated ones. I even almost got it to work with Webflow Logic only to find out the page needs to get refreshed before seeing new/updated CMS items. Bummer
Hello Pierre ! Thank you very much for this helpfull video ! Can you detail a little more how you can prevent the Webflow form to execute its classic behavior, and how you can obtain the animation with the loader ?
Great job with this Pierre. I signed up for Webflow just to use your template! Question: You didn't go too deep into the 'statement component'. How would you output the OpenAI text response to anything other than a form? Perhaps to a standard text box or button? For my instance, I don't want the users editing the text in-line. Thanks in advance!
Thanks ! 😊 And you can easily output the OpenAI response to a text box: simply remove the form & input field, add your text box instead, and give it the same ID of #statement-text, and you won't even have to modify the Javascript for it to work. Basically the way the code works is that it will output the response to the element with an ID of "#statement-text", regardless of wether that element is a form input field or a simple text block.
Great video - thank you! Question -- instead of Step 4 being "Display the results on the initial page", if you gathered the user's email in an input, could you send the ChatGPT results to the user's email instead?
Great video - thank you. Is there any way to format the return? Even when I specify to open AI to add html tags etc once it returns into a form input, all formatting goes out of the window.
Great video mate! I'm wondering if you could simply the code using the new Webflow Logic as it plugs directly into the submit button and allows you to build the prompt in the output.
Hey Pierre, thanks for sharing this. Although, I'm getting an error. I've done everything as shown and the make scenario is working till text completion but I don't get a response back. It just keeps loading and sometimes just shows "accepted". Idk where I am wrong. Can you please help?
You can easily find the Javascript in the cloneable (see link in description). From the Webflow designer, go in the home page settings, scroll down to the bottom, and the code will be there, before the closing /body tag 🙂
Thanks so much for this! I want to make a bot that helps people learn languages. Is make a scalable option for using apis? I am still pretty new to code and everything. I am planning on using Webflow for front end, firebase for backend, and make for api connection.
My pleasure ! And it depends on your exact needs & scenarios, but overall I'd say that Make is definitely a scalable option for using APIs, especially if you're not too familiar with coding 🙂
Do you get any error message in the developer console on your webpage ? It sounds like the Javascript is not running properly (because of an error), and therefore you're being redirected to the Webhook URL, because that's the default behaviour of the form element. That's why the Javascript code is set to prevent this default behaviour and use the fetch call instead, which happens in the background, and thus shouldn't redirect you to another URL. So you might just have a missing ";" or a small typo that is preventing your javascript from running properly !
It sounds like you sent too many requests to the webhook without having an active scenario to process them (which means they're stored in the webhook queue). On the free plan each Webhook can only have 50 requests queued before it stops accepting requests and sends that error message. So I would try going to the Webhooks page (from the left menu bar), and clearing the Queue of your Webhook, which should resolve this issue. Then once you activate your scenario it shouldn't be an issue anymore, because requests will be processed right away and therefore won't be queued. Let me know if that solves your problem !
Hey ! To generate an image instead of a text, you would just need a few changes : In the Make scenario, replace the "OpenAI - Create a Completion" module with the "OpenAI - Generate an image" module instead. (This module will take a prompt as an input, and output the URL of the generated image, instead of a text.) The "Webhook response" should then send back the URL of this image, instead of the text completion. And in the second part of the fetch call, you can then simply display this image URL on your page as regular text, or you can add an image element on your page, and set its source (src) to the URL provided by OpenAI.
Hi Pierre, for some reason I get redirected to the hook url and get the Accepted confirmation. Also, when I connect the Open AI in make, I only get the form inputs and not the prompt that i've built. Any ideas?
Hi Emeric-Victor, the Finsweet code in the header is only there for the Copy to Clipboard button, and has nothing to do with our main JS code or the Make scenario, so I don't think it was the reason why you were being redirected to the "Accepted" webhook page. It is more likely that there was an error in your JS code, preventing it from running at all. And if the JS code doesn't run, the fetch method is not being called, the prompt is not created, and the default behaviour of the form is not being prevented either, meaning the form fields will just be submitted to the Webhook URL. This would explain why you get redirected to the accepted page, and why you get all form fields submitted instead of just your prompt, because both are default behaviours. So I would check the developper console for any error in your JS code first ! But it sounds like you were able to resolve the issue by yourself in the end ?
Well I don't even think you could build this scenario with Zapier because they don't support custom webhook responses. And even if they did, you would need their 30$/month plan just because it's a multi-step scenario (not supported in their free plan). Whereas Make will let you build and run this scenario for free, while still having more monthly operations than with Zapier's 30$ plan! And then Make’s 10$ plan is basically equivalent to Zapier’s 192$ plan, making Zapier almost 20x more expensive than Make per month..
I also find Make’s UI much more pleasant and intuitive (especially for complex scenarios), and they have a lot of of really useful functionalities that Zapier simply doesn't support (no matter the plan), like webhook responses, inline functions & logic, routers, array iterators & aggregators, etc .. So it’s really a no brainer for me, Make is a much more powerful tool, at a fraction of the price only !
I don't have much experience with WhatsApp, but what you're describing sounds very doable. Make has a WhatsApp module that you could use for that. Then you could filter for registered users either before they can send the message (restricting access to the channel), or after they join the channel (check sender ID inside of Make, and verify it already exists in your own subscriber database). Then the rest should be pretty straight forward !
love the way that you explain the java
Thank you! I don’t know a thing about coding, but I cloned this and managed to get it to work!
Pierre, I cant thank you enough, we are non -coders and were learning some of this stuff and trying to create a similar website for last 2 weeks, but you made this so easy for us!
My pleasure, glad it helped you get your site running quicker !
Really incredible video Pierre!
Thank you for explaining this so well!
This works wonderfully. Many thanks! Super clear instructions.
My pleasure ! 😊
@@pierredemontaltedo you perhaps know a way though to hide the webhook somehow, since it’s now visible in the body? I’ve been investigating multiple options but none are non-complicated ones. I even almost got it to work with Webflow Logic only to find out the page needs to get refreshed before seeing new/updated CMS items. Bummer
*or API url for that matter
Hello Pierre ! Thank you very much for this helpfull video ! Can you detail a little more how you can prevent the Webflow form to execute its classic behavior, and how you can obtain the animation with the loader ?
Great job with this Pierre. I signed up for Webflow just to use your template! Question: You didn't go too deep into the 'statement component'. How would you output the OpenAI text response to anything other than a form? Perhaps to a standard text box or button? For my instance, I don't want the users editing the text in-line. Thanks in advance!
Thanks ! 😊
And you can easily output the OpenAI response to a text box: simply remove the form & input field, add your text box instead, and give it the same ID of #statement-text, and you won't even have to modify the Javascript for it to work. Basically the way the code works is that it will output the response to the element with an ID of "#statement-text", regardless of wether that element is a form input field or a simple text block.
Great video - thank you! Question -- instead of Step 4 being "Display the results on the initial page", if you gathered the user's email in an input, could you send the ChatGPT results to the user's email instead?
Great video - thank you. Is there any way to format the return? Even when I specify to open AI to add html tags etc once it returns into a form input, all formatting goes out of the window.
Great video mate! I'm wondering if you could simply the code using the new Webflow Logic as it plugs directly into the submit button and allows you to build the prompt in the output.
Thank you for sharing my friend.
My pleasure ! 😊
This is extremely extremely useful. Wow. Thank you so much for this!
Glad you found it useful !
Big thanks for sharing this!
My pleasure!
Thank you for this Pierre!
My pleasure 😊
Hey Pierre, thanks for sharing this. Although, I'm getting an error. I've done everything as shown and the make scenario is working till text completion but I don't get a response back. It just keeps loading and sometimes just shows "accepted". Idk where I am wrong. Can you please help?
Hey, thank you for this!
My pleasure 😊
Hey, from where did the javascript code came from ? Can't find it
You can easily find the Javascript in the cloneable (see link in description).
From the Webflow designer, go in the home page settings, scroll down to the bottom, and the code will be there, before the closing /body tag 🙂
big thanks
You're welcome!
Thanks so much for this! I want to make a bot that helps people learn languages. Is make a scalable option for using apis? I am still pretty new to code and everything. I am planning on using Webflow for front end, firebase for backend, and make for api connection.
My pleasure !
And it depends on your exact needs & scenarios, but overall I'd say that Make is definitely a scalable option for using APIs, especially if you're not too familiar with coding 🙂
I have followed all your instructions and the text never goes to the box as a response it opens a new page with the webhook in the address bar
Do you get any error message in the developer console on your webpage ?
It sounds like the Javascript is not running properly (because of an error), and therefore you're being redirected to the Webhook URL, because that's the default behaviour of the form element.
That's why the Javascript code is set to prevent this default behaviour and use the fetch call instead, which happens in the background, and thus shouldn't redirect you to another URL.
So you might just have a missing ";" or a small typo that is preventing your javascript from running properly !
I was curious if you'd know why i'd be getting "Queue is full." response when testing after i connected OpenAi in my make account?
It sounds like you sent too many requests to the webhook without having an active scenario to process them (which means they're stored in the webhook queue).
On the free plan each Webhook can only have 50 requests queued before it stops accepting requests and sends that error message.
So I would try going to the Webhooks page (from the left menu bar), and clearing the Queue of your Webhook, which should resolve this issue.
Then once you activate your scenario it shouldn't be an issue anymore, because requests will be processed right away and therefore won't be queued.
Let me know if that solves your problem !
Hey there, if I want to generate an image instead, how would I do that?
Hey ! To generate an image instead of a text, you would just need a few changes :
In the Make scenario, replace the "OpenAI - Create a Completion" module with the "OpenAI - Generate an image" module instead. (This module will take a prompt as an input, and output the URL of the generated image, instead of a text.)
The "Webhook response" should then send back the URL of this image, instead of the text completion.
And in the second part of the fetch call, you can then simply display this image URL on your page as regular text, or you can add an image element on your page, and set its source (src) to the URL provided by OpenAI.
Hi Pierre, for some reason I get redirected to the hook url and get the Accepted confirmation. Also, when I connect the Open AI in make, I only get the form inputs and not the prompt that i've built. Any ideas?
got it. Might have been the finsweet code in the header. That is the only one that was missing.
Hi Emeric-Victor, the Finsweet code in the header is only there for the Copy to Clipboard button, and has nothing to do with our main JS code or the Make scenario, so I don't think it was the reason why you were being redirected to the "Accepted" webhook page.
It is more likely that there was an error in your JS code, preventing it from running at all. And if the JS code doesn't run, the fetch method is not being called, the prompt is not created, and the default behaviour of the form is not being prevented either, meaning the form fields will just be submitted to the Webhook URL.
This would explain why you get redirected to the accepted page, and why you get all form fields submitted instead of just your prompt, because both are default behaviours.
So I would check the developper console for any error in your JS code first ! But it sounds like you were able to resolve the issue by yourself in the end ?
Why Make vs. Zapier, if I may ask?
Well I don't even think you could build this scenario with Zapier because they don't support custom webhook responses.
And even if they did, you would need their 30$/month plan just because it's a multi-step scenario (not supported in their free plan).
Whereas Make will let you build and run this scenario for free, while still having more monthly operations than with Zapier's 30$ plan!
And then Make’s 10$ plan is basically equivalent to Zapier’s 192$ plan, making Zapier almost 20x more expensive than Make per month..
I also find Make’s UI much more pleasant and intuitive (especially for complex scenarios), and they have a lot of of really useful functionalities that Zapier simply doesn't support (no matter the plan), like webhook responses, inline functions & logic, routers, array iterators & aggregators, etc ..
So it’s really a no brainer for me, Make is a much more powerful tool, at a fraction of the price only !
Hey, I was thinking is there anyway to create ChatGPT bot for WhatsApp using make and only subscribe WhatsApp user can send the input and get response
I don't have much experience with WhatsApp, but what you're describing sounds very doable.
Make has a WhatsApp module that you could use for that. Then you could filter for registered users either before they can send the message (restricting access to the channel), or after they join the channel (check sender ID inside of Make, and verify it already exists in your own subscriber database). Then the rest should be pretty straight forward !