Cant implement standard example - what is wrong ?

I am trying to implement the code form this article - Velo Tutorial: Sending a Triggered Email to Contacts | Help Center | Wix.com - been at it for a week now and just cannot get it to run - and am just not getting any where with numerous help articles. Am at the point of rage quitting and moving back to wordpress. If any one can give me a suggestion - and even a coder who can help me would appreciate it. The save form to the database is the only thing that works.
Cant get it to save to the contacts, cant get the customer id and cant send an email. in fact I doubt the event is even triggered - but cannot find fault finding tools to test.

//The form will save the captured data to a database table ‘Users’ and then create a new user in the CRM.
//It will read the user ID and send an email to verify the email.
//It is triggered by the submitt button called #button1
import wixCRM from ‘wix-crm’;
$w.onReady( function () {
});

export function button1_click(event, $w) {
//create an entry in the Wix CRM so that the user has a crm ID
//capture as many fields to write into the CRM as possible - will save synching of contacts to database
wixCRM.createContact({
“First Name”: $w(‘#input1’).value,
“Email”: [$w(“#input14”).value],
“Last Name”: $w(“#input2”).value,
//“Phone”: $w(“#input15”).value,
//“Street”: $w(“#input8”).value,
//“City”: $w(“#input10”).value,
//“Zip”: $w(‘#input15’).value,
//“Country”: $w(‘#input13’).value,
})
.then((contactId) => {
wixCRM.emailContact(‘Verify’, contactId, {
variables: {
subscribername: $w(‘#input1’).value,
}
})
.then(() => {
// do something after the email was sent
console.log()
})
. catch ((err) => {
// handle the error if the email wasn’t sent
});
});

}

Hi Ross,

I noticed a couple of issues with your example:

  1. The argument of wixCRM.createContact has a predefined set of fields it recognizes. In your case, First Name , Last Name , Email should be firstName , lastName , emails (note, emails is an array).

  2. Is Verify a valid triggered email ID? I created a triggered email and my autogenerated ID was R5bgzfr .

I used your code to recreate the example and it worked for me (replace R5bgzfr with your ID):

import wixCRM from "wix-crm";

$w.onReady(() => {});

export function button1_click(event, $w) {
  const contactInfo = {
    // https://www.wix.com/code/reference/wix-crm.html#ContactInfo
    firstName: $w("#input1").value,
    lastName: $w("#input2").value,
    emails: [$w("#input14").value]
  };

  const contactId = wixCRM.createContact(contactInfo).then(
    contactId => {
      console.log(`Contact ${contactId} has been created.`);

      const triggeredEmailId = "R5bgzfr"; // https://support.wix.com/en/article/creating-a-triggered-email
      const triggeredEmailOptions = {
        variables: {
          subscribername: $w("#input1").value
        }
      };

      return wixCRM
        .emailContact(triggeredEmailId, contactId, triggeredEmailOptions)
        .then(
          () => {
            console.log(`Triggered email ${triggeredEmailId} has been sent.`);
          },
          error => {
            console.error("An error occured while emailing the contact.", error);
          }
        );
    },
    error => {
      console.error("An error occured while creating a contact.", error);
    }
  );
}

I added logging. Open Developer Console in preview (or the console of your browser developer tools) to see them.

Also note that sending an email doesn’t work in Editor’s preview - it only works on a published website. While creating a contact does work in the preview.

1 Like

Thanks so much for this. It is substantially different to the sample code supplied by Wix that did not work - although the predefined set fields might have been the reason. The way I read it, the Wix article seemed to encourage the use of custom fields and no mention of the predefined fields.

Your use of the constactInfo also made sense. Once I get more confident - might expand its use.

As far as the triggered email id there is a wix walkthrough were they encourage one to set a new name for the triggered id. In this context seems to be working.

Thank you for also adding the logging - something I have also been trying to clarify.

The code runs but with two complications

  1. In the preview window it runs regardless of whether data validation is successful or not - i.e. has a field been completed. I will read up further to see if there is any way of only running it if all the fields are validated first. I am not sure if it runs on a live page if not validated but suspect it does;
  2. In preview mode it stopped with an error when it picked up a duplicate email. Do you have any suggestions to communicate that message to the user ?

Thanks once again.

In the preview window it runs regardless of whether data validation is successful or not - i.e. has a field been completed. I will read up further to see if there is any way of only running it if all the fields are validated first.

You can check the validity of the inputs when the button is clicked:

export function button1_click(event, $w) {
  const firstNameInput = $w("#input1");
  if (!firstNameInput.valid) {
    console.log("Invalid first name.");
    return;
  }

  const lastNameInput = $w("#input2");
  if (!lastNameInput.valid) {
    console.log("Invalid last name.");
    return;
  }

  const emailInput = $w("#input14");
  if (!emailInput.valid) {
    console.log("Invalid email.");
    return;
  }

  // ...
}

Or you can disable the button until the all inputs are valid:

import wixCRM from "wix-crm";

$w.onReady(() => {
  const firstNameInput = $w("#input1");
  const lastNameInput = $w("#input2");
  const emailInput = $w("#input14");

  const button = $w("#button1");

  updateButtonAvailability();
  [firstNameInput, lastNameInput, emailInput].forEach(input => {
    input.onChange(updateButtonAvailability);
  });

  function updateButtonAvailability() {
    if (inputsAreValid()) button.enable();
    else button.disable();
  }

  function inputsAreValid() {
    if (!firstNameInput.valid) {
      console.log("Invalid first name.");
      return false;
    }

    if (!lastNameInput.valid) {
      console.log("Invalid last name.");
      return false;
    }

    if (!emailInput.valid) {
      console.log("Invalid email.");
      return false;
    }

    console.log("All input is valid.");
    return true;
  }
});

// ...

In preview mode it stopped with an error when it picked up a duplicate email.

Could you elaborate? I can’t reproduce.

Yevhen,

The database connector setup has the option to check if all fields are completed and display an error message. Rather than having a lot of individual tests is there any way of tieing into that flag and stopping the save ? It also has a success message - maybe turn it around and only trigger on the success message - but no idea how to trigger based on the messages ?

Hey Ross,

Since the inputs are sumbitted to the dataset, just move your code for creating and emailing a contact to onAfterSave event handler of the dataset (see wix-dataset - Velo API Reference - Wix.com) instead of running the code on button click :

export function dataset1_afterSave(itemBeforeSave, itemAfterSave) {
  // ...
}

The dataset won’t be submitted if there’s a validation error, so the code will only run if the validation passes.

And you can get the entered data from the item itself instead of getting it from the inputs.