Use APIs to filter incoming requests
Create a form and connected to the API to get in requests — Vestel
If you ever find yourself in the spot where you don’t want to have too many environments and have a seamless user experience, then you might consider using your customer support desk API to receive support requests.
Some context:
If you’re a company offering support for your products and you have several vendors selling your product, and you want to have complete control over your incoming requests, both from your own store and those of your vendors, then you can use this cool trick we created: you can create a form from scratch in HTML/CSS/JS, host it on the vendor’s server somewhere and connect the form input fields to custom fields in your support platform using the API. This way, whenever a user sends in a request, the experience is unitary, they never leave the vendors website and the request gets sent into your support platform of choice via the API. Cool trick, eh?
It is recommended that you create separate forms for each vendor so that whenever you have an incoming ticket, you will know exactly which vendor it concerns.
The Form
The code
! function (e)
{
var n = {
callbacks:
{
getRandomId: function ()
{
return Math.floor(9999 * Math.random())
},
fileOnChange: function (n)
{
var i = n.target.files[0],
a = e(".file-name");
i && i.name && a.text(i.name)
},
post: function (i)
{
var a = e("#form__ticket--create"),
t = a.attr("action"),
l = {
body: i.fieldDescription
};
i.token && (l.uploads = [i.token]);
var s = JSON.stringify(
{
request:
{
requester:
{
name: i.fieldCustomerName,
email: i.fieldEmail
},
subject: i.fieldSubject,
comment: l,
ticket_form_id: "xxxxx",
organization_id: "xxxxxxxxxxx",
custom_fields: [,
{
id: yyyyyyyy,
value: i.fieldCustomerName
},
{
id: yyyyyyyy,
value: i.fieldSerialNumber
},
{
id: yyyyyyyy,
value: i.fieldProduct
},
{
id: yyyyyyyy,
value: i.fieldPhone
},
{
id: yyyyyyyy,
value: i.fieldProductNumber
},
{
id: yyyyyyyy,
value: i.fieldCity
},
{
id: yyyyyyyy,
value: i.fieldPostcode
},
{
id: yyyyyyyy,
value: i.fieldPurchseDate
},
{
id: yyyyyyyy,
value: i.fieldExtNumber
},
{
id: yyyyyyyy,
value: !0
},
{
id: yyyyyyyy,
value: "warranty"
},
{
id: yyyyyyyy,
value: "kochen"
},
{
id: yyyyyyyy,
value: "1001331 Burger Kuechenmoebel GmbH|Martin-Luther-Str. 31 | 39288 |Burg | Deutschland"
},
{
id: yyyyyyyy,
value: i.fieldAddress
}]
}
});
e.ajax(
{
url: t + "/api/v2/requests.json",
type: "POST",
contentType: "application/json",
data: s
}).done(function (i)
{
i && (a.trigger("reset"), e("#js-loading--spinner").hide(), e(".loading__message").addClass("-success"), e("#js-loading__message--body").text("Vielen Dank. Ihr Ticket wurde erstellt!"), setTimeout(function ()
{
n.callbacks.toggleLoading()
}, 3500))
}).fail(function (i)
{
e(".loading__message").addClass("-error"), e("#js-loading--spinner").hide(), e("#js-loading__message--body").text("Es ist ein Serverfehler aufgetreten! Bitte versuchen Sie es später noch einmal!"), setTimeout(function ()
{
n.callbacks.toggleLoading()
}, 2500)
})
},
scrollToElement: function (n)
{
n.preventDefault();
var i = e(this),
a = e("html, body"),
t = i.data("scroll-to");
a.stop().animate(
{
scrollTop: e(t).offset().top
}, 1e3)
},
submitForm: function (e)
{
return !1
},
toggleLoading: function (n)
{
n = n || null;
var i = e(".loading");
switch (n)
{
case !0:
i.removeClass("d-none");
break;
default:
i.addClass("d-none")
}
},
uploadAttachement: function (n, i, a)
{
var t = e("#form__ticket--create"),
l = t.attr("action");
e.ajax(
{
url: l + "/api/v2/uploads.json?filename=" + n.name,
type: "POST",
dataType: "json",
processData: !1,
contentType: n.type,
data: n
}).done(function (e)
{
e && e.upload.token && (i.token = e.upload.token), a(i)
}).fail(function (e)
{
return a(i), null
})
},
createTicket: function (i)
{
var a = (e(i.element), i.isValid()),
t = e("#form__email").val(),
l = e("#form__subject").val(),
s = e("#form__description").val(),
r = e("#form__serial").val(),
o = e("#form__product").val(),
u = e("#form__customer-name").val(),
d = e("#form__phone").val(),
c = e("#form__product-number").val(),
m = e("#form__city").val(),
f = e("#form__postcode").val(),
g = e("#form__purchase-date").val(),
h = e("#form__ext-number").val(),
b = e("#upload-attachement")[0].files[0] || null,
v = e("#form__address").val(),
_ = {
token: null,
fieldCustomerName: u || null,
fieldSubject: l || null,
fieldDescription: s || null,
fieldEmail: t || null,
fieldSerialNumber: r || null,
fieldProduct: o || null,
fieldPhone: d || null,
fieldProductNumber: c || null,
fieldCity: m || null,
fieldPostcode: f || null,
fieldPurchseDate: g || null,
fieldExtNumber: h || null,
fieldAddress: v || null
};
return a && (n.callbacks.toggleLoading(!0), b ? n.callbacks.uploadAttachement(b, _, n.callbacks.post) : n.callbacks.post(_)), !1
}
},
events: function ()
{
var i = e("#form__ticket--create");
i.length && (e(document).on("submit", "#form__ticket--create", n.callbacks.submitForm).on("change", "#upload-attachement", n.callbacks.fileOnChange), i.parsley().on("form:submit", n.callbacks.submitForm).on("form:validate", n.callbacks.createTicket))
},
initialState: function ()
{
n.callbacks.toggleLoading(!0), setTimeout(function ()
{
n.callbacks.toggleLoading()
}, 500)
},
init: function ()
{
this.events(), this.initialState(), window.Parsley && function ()
{
window.Parsley.addValidator("filemaxmegabytes",
{
requirementType: "string",
validateString: function (e, n, i)
{
var a = i.$element[0].files,
t = 1048576 * n;
return 0 === a.length || 1 === a.length && a[0].size <= t
},
messages:
{
en: "File is too big"
}
}), Parsley.addMessages("de",
{
defaultMessage: "Die Eingabe scheint nicht korrekt zu sein.",
type:
{
email: "Die Eingabe muss eine gültige E-Mail-Adresse sein.",
url: "Die Eingabe muss eine gültige URL sein.",
number: "Die Eingabe muss eine Zahl sein.",
integer: "Die Eingabe muss eine Zahl sein.",
digits: "Die Eingabe darf nur Ziffern enthalten.",
alphanum: "Die Eingabe muss alphanumerisch sein."
},
notblank: "Die Eingabe darf nicht leer sein.",
required: "Dies ist ein Pflichtfeld.",
pattern: "Die Eingabe scheint ungültig zu sein.",
min: "Die Eingabe muss größer oder gleich %s sein.",
max: "Die Eingabe muss kleiner oder gleich %s sein.",
range: "Die Eingabe muss zwischen %s und %s liegen.",
minlength: "Die Eingabe ist zu kurz. Es müssen mindestens %s Zeichen eingegeben werden.",
maxlength: "Die Eingabe ist zu lang. Es dürfen höchstens %s Zeichen eingegeben werden.",
length: "Die Länge der Eingabe ist ungültig. Es müssen zwischen %s und %s Zeichen eingegeben werden.",
mincheck: "Wählen Sie mindestens %s Angaben aus.",
maxcheck: "Wählen Sie maximal %s Angaben aus.",
check: "Wählen Sie zwischen %s und %s Angaben.",
equalto: "Dieses Feld muss dem anderen entsprechen."
}), Parsley.setLocale("de")
}()
}
};
e(function ()
{
n.init()
})
}(jQuery);
Conclusion
We can easily craft a solution for unitary user experience which can be easily reproduced as many times as needed for you to have complete control of your customer support queries.
Wanna chat with me? I don’t bite, bros, so send me an email at hi@dominiccx.com