[Vuejs]-Twilio API and Vue.JS

by

0👍

You need a proper backend what handles the request, or you can use curl to make the request.

export default {
  data() {
    return {
      authToken: '[AuthToken]',
      accountSid: 'xxxxxxxxxxxxxxx',
      to: 'whatsapp:+xxxxxxxx',
      from: 'whatsapp:+xxxxxxx',
      messageBody: 'Nieuwe vraag',
    };
  },
  methods: {
    sendMessage() {
      const url = `https://api.twilio.com/2010-04-01/Accounts/${this.accountSid}/Messages.json`;
      const data = new FormData();
      data.append('To', this.to);
      data.append('From', this.from);
      data.append('Body', this.messageBody);

      const headers = {
        Authorization: `Basic ${btoa(`${this.accountSid}:${this.authToken}`)}`,
      };

      fetch(url, {
        method: 'POST',
        headers,
        body: data,
      })
        .then((response) => response.json())
        .then((data) => {
          console.log('Message sent', data);
        })
        .catch((error) => {
          console.error('Error sending message', error);
        });
    },
  },
};

Leave a comment