How to connect openai api with webflow? – Custom code – Forum

by


Hi everyone,

I’m trying to connect webflow with openai api. I was using make and webhook attribute to make this happen but the response isn’t reaching webflow due to some reason.

I’m stuck since months on this. Please help.

Here are the custom codes.

<script>
// Select the form element and the loader elements 
const form = document.querySelector('#wf-form-generator');
const resultWrap = document.querySelector('#statement-component');
const resultLoader = document.querySelector('#statement-loader');
const resultText = document.querySelector('#statement-text');

// Add a submit event listener to the form
form.addEventListener('submit', (event) => {
    // Prevent the default form submission behavior
    event.preventDefault();
    
    // Show the div that will contain the response and scroll to it
    resultWrap.style.display = "block";
    resultLoader.style.display = "flex";
    resultWrap.scrollIntoView({behavior: "smooth"});
    
    // Get the values of the form fields
    const income = document.getElementById('income').value;
    const debt = document.getElementById('debt').value;
    const monthlysavings = document.getElementById('monthlysavings').value;
    const risktolerance = document.getElementById('risktolerance').value;
    const anynote = document.getElementById('anynote').value;
    const profession = document.getElementById('profession').value;
    const age = document.getElementById('age').value;

    
    // Create the prompt string using the form field values
    const prompt = `Generate an investment stratgey for an Indian who's profession is ${profession}, age is ${age} and income is ${income}. Their monthly savings are ${monthlysavings} and risk tolerance is ${risktolerance}. Keep in mind ${anynote}. The output should be in similar format : Sensex or nifty ₹1000, any individual high performing stocks ₹200, Gold ₹100, Silver ₹50 and mutual funds smalll cap, medium cap and large cap ₹500 etc. Note that these amounts should add upto the amount of ${monthlysavings}.`;
	
		// Make an API call to our Make cenario
    fetch('my make url', {
        method: 'POST', 
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ 
        	prompt: prompt, 
          max_tokens: 512
        })
    })
    // Then get the API response object, covert it to text and display it
    .then(response => response.text())
    .then(result => {
    	resultText.value = result;
    	resultLoader.style.display = "none";
    });   
});
</script>

Here is my site Read-Only: dashboard (test project)




2

Debug your Make scenario using a tool like Postman to test and see the results. Once you know it’s working, the JS is rather trivial.

Hi Michael,

It is showing timeout error in postman.

I’m getting timeout error since quite some time now for this scenario.

What do you suggest I do?



Source link

Leave a Comment