Discussion Thread View
Expand all | Collapse all

custom fields and attributes in webchat widget

Jump to Best Answer
  • 1.  custom fields and attributes in webchat widget

    Posted 07-29-2021 09:53
    Hi Team,

    I am struggling with how to create custom fields in the Webchat Widget including the attributes.

    I can add a new field to the webchat using the custom JSON, but I want to know how I can get the value for the custom field as an attribute so I can use the value for customization and integration.

    Would appreciate your support.



  • 2.  RE: custom fields and attributes in webchat widget
    Best Answer

    Top 25 Contributor
    Posted 07-30-2021 07:25
    Hi Mohammed,

    I solved something similar on our test environment, and here are my notes:

    1. add custom field e.g. "phone" in widget form --->{"id":"cx_webchat_form_phone","name":"phone","maxlength":"100","placeholder":"09xxXXXxxx","label":"@i18n:webchat.ChatFormPhone"}

    2. create extension file which contains function similar like one bellow:
    service.command("WebChatService.setChatAdditionalAttributes", {
    attributeName1: "attributeValue1",
    attributeName2: "attributeValue2",
    in my case extension file looks:
    console.log("Registering custom extension->FormularAddFieldExtension");
    var oFormularAddFieldExtension = CXBus.registerPlugin("FormularAddFieldExtension");
    oFormularAddFieldExtension.command("App.setTheme", {theme: "dark"});
    oFormularAddFieldExtension.command("App.setLanguage", {lang: "sk"}).done(function(e){

    // App set language successfully started
    console.log("###App set language successfully started");


    // App failed to set language
    console.log("###App failed to set language");
    oFormularAddFieldExtension.subscribe("WebChat.opened", function(e){console.log("Webchat opened....");});
    console.log("oFormularAddFieldExtension subscribe");
    console.log("oFormularAddFieldExtension ready");
    oFormularAddFieldExtension.before("WebChatService.ready", function(e){
    oFormularAddFieldExtension.command("WebChatService.setChatAdditionalAttributes", {
    console.log("Attribute updated from oFormularAddFieldExtension");
    return e;

    oFormularAddFieldExtension.before("WebChatService.startChat", function(oData){
    oFormularAddFieldExtension.command("WebChatService.setChatNotes", {notes:"Telephone: " + oData.form.phone});
    oFormularAddFieldExtension.command("WebChatService.setChatAdditionalAttributes", {ChatContactPhone: oData.form.phone,ChatContactCity: oData.form.city,ChatContactCategory: oData.form.category});
    console.log("###Attribute notes updated from oFormularAddFieldExtension-phone:" + oData.form.phone );
    console.log("###Attribute notes updated from oFormularAddFieldExtension-city:" + oData.form.city );
    console.log("###Attribute notes updated from oFormularAddFieldExtension-city:" + oData.form.category );
    return oData;

    3. create new extension on "Widget" configuration in "iconnect"

    4. when form is submitted, you can find custom fields as attributes with prefix WebTools_... in ip.ininlog
    in my case:
    e.g. WebTools_ChatContactPhone=789465231,WebTools_ChatContactCity=Bratislava,WebTools_ChatContactCategory=Infrastruktura

    5. you can view them in "iconnect" as well, if you define "Queue Columns" in Interaction Administrator based on attributtes "WebTools_..."
    e.g. Column name = Chat - Phone, Interaction Attribute = WebTools_ChatContactPhone, Type = String

    If you find more elegant solution how to do it please share it.



    Pavel Broska
    Alcasys Slovakia a.s

  • 3.  RE: custom fields and attributes in webchat widget

    Posted 08-02-2021 08:26
    Hi Pavel,

    Thanks for the reply I will try and get back to you.

    Also would you please let us know how I can define to open the web chat form directly without clicking the Chat button?