Hi There!
I'm trying to connect a form to Zapier and feel I have followed all of the steps correctly to set up the Wix integration (including installing the backend package), but keep getting this error when I try to submit the form: "(0 , zapier_integration_backend.postToZapier) is not a function".
Any ideas?
Code below:
//The following imports bring data to the page necessary for the code to run. import wixData from 'wix-data'; import wixWindow from 'wix-window'; import wixLocation from 'wix-location'; import { session } from 'wix-storage'; import { postToZapier } from '@velo/zapier-integration-backend' let allFieldsValid = false //This function sets the default boolean for whether all fields are valid (and of course, they aren't at the time the page loads because they are not not yet filled in). //This function uses the Wix Zapier integration package found in "Code Files" to pull information from the form into Zapier. function zapierWrapper() { postToZapier("zapierNewReferralPartner", { "first_name": $w("#input4").value, "last_name": $w("#input5").value, "business_name": $w("#input6").value, "email_address": $w("#input7").value, "phone_number": $w("#input8").value, "referral_code": $w("#input9").value }); } //This function triggers every time any field in the contact form is updated. It checks the input fields against their validation criteria and then changes allFieldsValid to true once each field meets validation criteria. export function dataset1_itemValuesChanged() { let firstValid = $w("#input4").valid let lastValid = $w("#input5").valid let businessValid = $w("#input6").valid let emailValid = $w("#input7").valid let phoneValid = $w("#input8").valid let codeValid = $w("#input9").valid if (firstValid && lastValid && businessValid && emailValid && phoneValid && codeValid) { allFieldsValid = true } else { allFieldsValid = false } } //This function triggers when the "Send" button is pressed. export function button3_click(event) { console.log("Button3 clicked") wixData.query("ReferralPartners") //Establishes a query on the ReferralPartners collection. .contains("referralCode", $w('#input9').value) //Query the collection for any items whose "Referral Code" field contains the value the user entered in the Referral Code Box (input 9) .find() .then(res => { console.log("Ran the query for Referral Code"); //Runs a conditional check to ensure an input exists, is valid, and that a matching value already exists in the database. if (res.length > 0 && $w('#input9').value.length > 0 && $w("#input9").valid) { console.log ("Referral code already exists."); session.setItem('passedData', $w('#input9').value) //Sets the referral code entered as data to pass to and display in the lightbox popup. wixWindow.openLightbox("Referral Code Not Available") //Displays an error message in a lightbox popup that the referral code already in use. } else { //Runs a conditional check to see whether allFieldsValid = true. if (allFieldsValid) { console.log("Hooray! You have a new referral partner coming!"); $w('#dataset1').save() //Since the code exists, is valid, and is unique, and since all fields are valid, the form is submitted. zapierWrapper() //See funtion as written above. wixLocation.to("/referral-partner-confirmation"); //Sends the user to a confirmation page after successfully submitting the form. console.log("Save Done"); } else { wixWindow.openLightbox("Submit Error") //Displays an error message in a lightbox popup that one or more fields is not valid. console.log("Validation not met.") } } }) }
@Todd Harper even i have done the same thing and api call is also happening, but not able to see the zaps in zap history. Can you give a quick steps to setup zap via webhooks ?
I'm not so sure there's a way to print data to your website using the output of a Zap. I'm also not familiar with DigitalOcean.
If you can know in advance what the server details will be prior to running the Zap, I'd just append those details to a database in Wix and pull that information into your text box.
Unfortunately, I think that's the best help I can offer. I'm not a professional developer and even something as simple as the Zapier code above took me, like, 2 weeks to research and write.
Hey Todd, I would like to know after "Code by Zaper" setp, how did you get the result printed on console OR text box?
My zap is running fine and I would like to print the results from zap back onto the console. I am stuck at the above step buddy!
SOLUTION:
After installing the Zapier integration package, I placed the following code in a new Backend module. For the purpose of this comment, let's say it's called "zapier-integration.jsw".
import { postToZapier } from '@velo/zapier-integration-backend';
export async function zapierWrapper(zapierSecretUrl, bodyObject) { postToZapier(zapierSecretUrl, bodyObject) console.log("Sent to Zapier") };
Then, on the front end page code, where I had originally written:
import{postToZapier}from '@velo/zapier-integration-backend';
instead, write:
import { zapierWrapper } from 'backend/zapier-integration.jsw';
Then, we can call the zapierWrapper function in the body of the code as follows:
zapierWrapper("zapierNewReferralPartner", { //Replace zapierNewReferralPartner with the name of your secret. "first_name": $w("#input4").value, "last_name": $w("#input5").value, //etc... });
Once I finally got it working, I hit another road block in that Zapier places all the information from the zapierWrapper function in one "raw_body" output. So I added an action step in Zapier using the native "Code by Zapier" app with the following JS in it to parse each collected category into its own field:
const result = JSON.parse(inputData.rawBody);
return {result: result};
The final result after a multiple day struggle: bliss.
I do not work with the package, I do it directly thru webhook, so my comment comes with some reservations, but I see a difference in import ((0 , zapier_integration_backend.postToZapier) and error (@velo/zapier-integration-backend). Note the diff between dashes and underscores.
EDIT: other way around, but observation stays the same