Connecting HTML/PHP Form Through API

wdjames at April 23rd, 2019 05:59 — #1

Hello,

We have a client that wants to integrate their website contact forms to their OnePageCRM account. Once the contact form is submitted, they would like to create a new contact and save the submitted details into their OnePageCRM account.

We've had a look at the API documentation but would like to see a basic tutorial/demo of how this can be done with a html/php form(not a Wordpress site or Mailchimp form) as we feel that the documentation is lacking for those who work mainly in the front-end.

Thanks

vladimir at April 23rd, 2019 16:48 — #2

Hi James!

At the moment we have no examples on how to work with API from the front-end, but here's what you can do on your side.
You can do ajax requests to OnePageCRM using your preferred ajax library like axios or simply with jQuery. OnePageCRM provides basic way of authorization, in order to do that you have to construct auth token and set it to Authorization header in your requests. Auth token is constructed from your user ID and app key (all this data you can find here https://app.onepagecrm.com/app/api, tab Configuration). Here's an example of how you can construct this auth token using crypto-js library (auth token is a based64 encode string of concatenation of your user ID and app key delimited by a semicolon):

function onepagecrmAuthToken(UID, APIKey) { // auth header for requests 
    var authToken = UID + ":" + APIKey;
    var authTokenWordArray = CryptoJS.enc.Utf8.parse(authToken); // Word Array object
    var encryptedAuthToken = CryptoJS.enc.Base64.stringify(authTokenWordArray);
    return encryptedAuthToken;
}

Now you can add Authorization header to your requests with value of 'Basic ' + onepagecrmAuthToken(myUserId, myAppKey). here's an example of it with jQuery:

var authToken = onepagecrmAuthToken(myUserId, myAppKey);
$.ajax({
    type: 'GET',
    url: 'https://app.onepagecrm.com/api/v3/contacts.json',
    headers: { "Authorization": "Basic " + authToken },
    success: function(data) {
      console.log("I have some data here!\n" + data);
    },
});

I hope this information helped you, please feel free to contact us if you have any questions. More information about our endpoints you can find in API section https://developer.onepagecrm.com/api

Our endpoints are RESTful, so in order to create a contact you can do a POST request to https://app.onepagecrm.com/api/v3/contacts supplying contact data in request body, the list of necessary fields you can find here https://developer.onepagecrm.com/api/#operations-Contacts-post_contacts

Thanks,
Vlad