{"id":22420221,"url":"https://github.com/qiscus/qiscus-sdk-web-core","last_synced_at":"2025-08-01T04:32:03.418Z","repository":{"id":25717234,"uuid":"105991139","full_name":"qiscus/qiscus-sdk-web-core","owner":"qiscus","description":"Qiscus provide everything you need to power up your app with chats. And it's now made simple.","archived":false,"fork":false,"pushed_at":"2023-10-03T07:43:58.000Z","size":9879,"stargazers_count":7,"open_issues_count":9,"forks_count":23,"subscribers_count":8,"default_branch":"master","last_synced_at":"2023-10-04T17:30:25.574Z","etag":null,"topics":["chat","chat-engine","chatbot","chatbot-application","javascript","message","messaging","messenger","mqtt","qiscus","real-time"],"latest_commit_sha":null,"homepage":"https://www.qiscus.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/qiscus.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2017-10-06T10:09:38.000Z","updated_at":"2023-08-28T11:40:02.000Z","dependencies_parsed_at":"2022-07-27T05:32:05.345Z","dependency_job_id":null,"html_url":"https://github.com/qiscus/qiscus-sdk-web-core","commit_stats":null,"previous_names":[],"tags_count":170,"template":null,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/qiscus%2Fqiscus-sdk-web-core","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/qiscus%2Fqiscus-sdk-web-core/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/qiscus%2Fqiscus-sdk-web-core/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/qiscus%2Fqiscus-sdk-web-core/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/qiscus","download_url":"https://codeload.github.com/qiscus/qiscus-sdk-web-core/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228329963,"owners_count":17903023,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["chat","chat-engine","chatbot","chatbot-application","javascript","message","messaging","messenger","mqtt","qiscus","real-time"],"created_at":"2024-12-05T16:18:18.597Z","updated_at":"2024-12-05T16:18:19.362Z","avatar_url":"https://github.com/qiscus.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Qiscus Web SDK Core\n\nThis library contains core functionalities needed to create a chat application using qiscus. \n\n## Installing\n\n```\n$ npm i qiscus-sdk-core\n// or if you're using yarn\n$ yarn add qiscus-sdk-core\n```\n\nthen you need to import this library into your application.\n\n```\nimport QiscusSDK from 'qiscus-sdk-core';\n\nconst qiscus = new QiscusSDK();\n```\n\n## Init using AppId \n\n```\nqiscus.init({\n  // change this into your own AppId through https://dashboard.qiscus.com\n  AppId: 'sdksample',\n  options: {\n    loginSuccessCallback: function() {\n      // example: start chatting with another user after successfully login\n      qiscus.chatTarget('guest@qiscus.com').then(res =\u003e {\n        console.info('chat with guest@qiscus.com', qiscus.selected);\n      });\n    },\n    loginErrorCallback(data) {},\n    newMessagesCallback(data) {},\n    groupRoomCreatedCallback(data) {},\n  },\n  mode: 'widget', // widget | wide\n  mqttURL: '...', // custom mqtt URL\n  baseURL: '...', // custom base URL\n});\n```\n\n## Init using Custom Server\n```\nqiscus.init({\n  // change this into your own AppId through https://dashboard.qiscus.com\n  AppId: 'sdksample',\n  options: { },\n  mqttURL: '...', // custom mqtt URL\n  baseURL: '...', // custom base URL\n});\n```\n\n## Authentication with `UserId` and `UserKey`\n```\nqiscus.setUser(userId, key, displayName, avatarURL); \n// loginSuccessCallback | loginErrorCallback will be triggered by this point\n```\n\n### Authentication with `JWT`\n\nFirst we need to get nonce from the server first.\n```\nlet nonce;\nqiscus.getNonce().then(res =\u003e nonce = res);\n```\n\nThen, we need to get identity token from server, qiscus doesn't handle this thing, it's up to client how then want to handle this. After identity token is retrieved, we need to verify the identity token to qiscus server.\n```\nlet nonce, identityToken;\nqiscus.getNonce().then(res =\u003e nonce = res.nonce)\n\n// custom api call to jwt server by using nonce retrieved from previous step\napi.getIdentityToken(nonce).then(res =\u003e identityToken = res.identity_token);\n\n// verify identity token received to qiscus server\nqiscus.verifyIdentityToken(identityToken).then(res =\u003e identityToken = res);\n```\n\nUse the token to authenticate\n```\nqiscus.setUserWithIdentityToken(identityToken);\n// loginSuccessCallback | loginErrorCallback will be triggered by this point\n```\n\n## Updating a User Profile and Profile Image\nCall another setUser() with new data\n```\nqiscus.setUser(userId, key, displayName, avatarUrl)\n// this method can only be used to update displayName and avatarUrl\n```\n\n## Check is User Logged In\n```\nqiscus.isLogin // return true or false\n```\n\n## Logout\n\n```\nqiscus.logout();\n```\n\n## Send Messages\n```\nqiscus.sendMessage(\n  roomId:\u003cNumber\u003e, \n  message:\u003cString\u003e, \n  uniqueId:\u003cString\u003e, // optional, will be automatically generated if `null`\n  type:\u003cString\u003e, // default to text\n  payload:\u003cString\u003e, // JSON.stringify(payload object)\n  extras:\u003cObject\u003e); // In case we need to attach extra data\n```\n\nExample of sending text message:\n```\nqiscus.sendComment(roomId, 'my message', null, 'text', null, null);\n```\n\nExample of sending file attachment:\n```\nconst filePayload = JSON.stringify({\n    url: \"https://res.cloudinary.com/qiscus/image/upload/USWiylE7Go/ios-15049438515185.png\",\n    caption: \"Ini gambar siapa?\"\n});\nqiscus.sendComment(roomId, 'check my image', null, 'file_attachment', filePayload, null);\n```\n\nExample of sending custom message:\n```\nconst customPayload = JSON.stringify({\n  type: 'my-awesome-profile-card',\n  content: {name, phone, ...}\n});\nqiscus.sendComment(roomId, 'check my profile card', null, 'custom', customPayload, null);\n```\n\nExample payload of sending carousel:\n```\nconst carouselPayload = JSON.stringify({\n  cards: [{\n    image:\"http://url.com/gambar.jpg\",\n    title:\"Atasan Blouse Tunik Wanita Baju Muslim Worie Longtop\",\n    description:\"Oleh sippnshop\\n96% (666 feedback)\\nRp 49.000.00,-\\nBUY 2 GET 1 FREE!!!\",\n    default_action: {\n      type:\"postback\",\n      postback_text:\"Load more\",\n      payload:{\n        url:\"http://url.com/baju?id=123\u0026track_from_chat_room=123\",\n        method:\"get\",\n        payload:null\n      }\n    },\n    buttons:[\n       {\n        label:\"button1\",\n        postback_text:\"Load more\",\n        type:\"postback\",\n        payload:{\n          url:\"http://somewhere.com/button1\",\n          method:\"get\",\n          payload:null\n        }\n      },\n      {\n        label:\"button2\",\n        postback_text:\"\",\n        type:\"link\",\n        payload:{url:\"http://somewhere.com/button2?id=123\",\"method\":\"get\",\"payload\":null}\n      }\n    ]\n  }]\n});\nqiscus.sendComment(roomId, 'test carousel', null, 'carousel', carouselPayload, null);\n```\n\n\n\n## Load Messages\n```\noptions = {\n  last_comment_id: 10,\n  after: true/false,\n  limit: 10\n}\n\nqiscus.loadComments(room_id, options = {})\n  .then(res =\u003e { \n    // do something \n  }, err =\u003e { \n    // throw the error to your log of choice \n  });\n```\n\n## Load more\nUse API above and pass last commend id of current room\n```\noptions = {\n  limit: 20\n}\n\nqiscus.loadMore(last_comment_id, options = {})\n  .then( res =\u003e {\n    console.info(res);\n  }, err =\u003e {\n    throw new Error(err);\n  });\n```\n\n# Room\n## Create 1-on-1 Chat Room\n```\nqiscus.chatTarget(userId) // return Promise also triggering chatRoomCreatedCallback() of init options\n```\n\n## Create Group Room\n```\nusers = [user1, user2, user3]\noptions = {\n  \"avatar_url\": \"https://mybucket.com/image.jpg\"\n}\ncreateGroupRoom (name, users, options)\n  .then(res =\u003e {\n    new Notification('Success', { body: `Room created`});\n  }, err =\u003e {\n    throw new Error(err);\n  });\n// return promise\n// also triggered groupRoomCreatedCallback();\n```\n\n## Get Chat Room by Id\n```\nqiscus.getRoomById(id).then(res =\u003e {\n  // do something, notify user, etc\n}, err =\u003e {\n  // log? throw err?\n})\n```\n\n## Get Chat Room By Channel\n```\nqiscus.getOrCreateRoomByChannel(channel).then(res =\u003e {\n  // do something, notify user, etc\n}, err =\u003e {\n  // log? throw err?\n});\n```\n\n## Get Currently Selected Chat Room Participants\n```\nqiscus.selected.participants // return array of participants object\n```\n\n## Get Rooms Info\n```\n/**\n  * Params consisted of\n  * @param {room_ids} array of room ids\n  * @param {room_unique_ids} array of of room unique ids\n  * @param {show_participants} show list of participants, default true\n  * @param {show_removed} show removed room, default false\n  * @returns Promise\n  * @memberof QiscusSDK\n  */\nqiscus.getRoomsInfo(params).then(res =\u003e {\n  // display the data in modal box?\n}, err =\u003e {\n  // log? throw err?\n})\n```\n\n## Get Rooms List\n```\nqiscus.loadRoomList().then(res =\u003e {\n  // populate our own rooms list?\n  this.conversations = res;\n}, err =\u003e {\n  // log? throw err?\n}); // return Promise\n```\n\n## Update Room\n```\n/**\n* Update room\n* @param {id, room_name, avatar_url, options} args \n* @param id \u003cInt\u003e required\n* @param room_name \u003cString\u003e optional\n* @param avatar_url \u003cString\u003e optional\n* @param options \u003cObject\u003e optional\n* @return Promise\n*/\nqiscus.updateRoom({id: 1, room_name: 'test room', avatar_url: 'http://my.url', options: {official: false}}).then(res =\u003e {\n  // do something, notify user, etc\n}, err =\u003e {\n  // log? throw err?\n})\n```\n\n# Statuses\n## Publish Start Typing\n```\nqiscus.publishTyping(1); \n```\n\n## Publish Stop Typing\n```\nqiscus.publishTyping(0)\n```\n\n## Update message Status (read)\n```\nqiscus.readComment(room_id, comment_id);\n```\n\n## Update message Status (receive)\n```\nqiscus.receiveComment(room_id, comment_id);\n```\n\n## Currently Selected Rooms\n```\nqiscus.selected // room info\nqiscus.selected.comments // comments list\n```\n\n## Loaded Rooms\n```\nqiscus.rooms\n```\n\n## userData\n```\nqiscus.userData\n```\n\nReturn currently logged in user.\n\n# Event Handler\n## loginSuccessCallback\nCalled when login is Success\n```\nqiscus.init({\n  AppId: ...,\n  options: {\n    loginSuccessCallback(response) {\n      // example: chat with user when login is successful\n      qiscus.chatTarget(userId);\n    }\n  }\n});\n```\n\n## loginErrorCallback\nCalled when login  is unsuccessful\n```\nqiscus.init({\n  AppId: ...,\n  options: {\n    loginErrorCallback(error) {\n      // example: notify user there's problem\n      throw new Error(error);\n    }\n  }\n});\n```\n\n## newMessagesCallback\nCalled when there's new message\n```\nqiscus.init({\n  AppId: ...,\n  options: {\n    newMessagesCallback(messages) {\n      // example: set desktop notification for incoming comment\n      //  request permission if it is disabled\n      if (Notification.permission !== \"granted\") Notification.requestPermission();\n      // create the notification if only window is not focused\n      if ( document.hasFocus() )) return\n      messages.forEach(message =\u003e {\n        let notif = new Notification(`New message from ${message.username}`, {\n          body: message.message\n          icon: your-icon-url\n        });\n        notif.onClick = function(){\n          notif.close();\n          window.focus();\n        }\n      })\n    }\n  }\n});\n\n// sample messages payload\n[{\n  \"chat_type\": \"single\",\n  \"comment_before_id\": 827962,\n  \"comment_before_id_str\": \"827962\",\n  \"disable_link_preview\": false,\n  \"email\": \"customer-service@email.com\",\n  \"id\": 827963,\n  \"id_str\": \"827963\",\n  \"message\": \"adf;lkjadsf\",\n  \"payload\": null,\n  \"room_avatar\": \"\",\n  \"room_id\": 30418,\n  \"room_id_str\": \"30418\",\n  \"room_name\": \"Customer Service\",\n  \"timestamp\": \"2017-09-29T10:51:25Z\",\n  \"topic_id\": 30418,\n  \"topic_id_str\": \"30418\",\n  \"type\": \"text\",\n  \"unique_temp_id\": \"bq1506682285227\",\n  \"unix_nano_timestamp\": 1506682285076080000,\n  \"unix_timestamp\": 1506682285,\n  \"user_avatar\": {\n    \"avatar\": {\n      \"url\": \"https://qiscuss3.s3.amazonaws.com/uploads/55c0c6ee486be6b686d52e5b9bbedbbf/2.png\"\n    }\n  },\n  \"user_avatar_url\": \"https://qiscuss3.s3.amazonaws.com/uploads/55c0c6ee486be6b686d52e5b9bbedbbf/2.png\",\n  \"user_id\": 131324,\n  \"user_id_str\": \"131324\",\n  \"username\": \"Customer Service\"\n}]\n```\n\n## presenceCallback\nCalled when our opponent's online or offline\n\n```\nqiscus.init({\n  AppId: ...,\n  options: {\n    presenceCallback(data) {\n      // doing something here\n    }\n  }\n});\n```\n\n## typingCallback\nCalled when there are someone typing in the room that we subscribe\n```\nqiscus.init({\n  AppId: ...,\n  options: {\n    typingCallback(data) {\n      // doing something here\n    }\n  }\n});\n```\n\n\n## commentDeliveredCallback\nCalled when our message get delivered (reach our opponent's) device\n```\nqiscus.init({\n  AppId: ...,\n  options: {\n    commentDeliveredCallback(data) {\n      // doing something here\n    }\n  }\n});\n```\n\n## commentReadCallback\nCalled when our message being read\n```\nqiscus.init({\n  AppId: ...,\n  options: {\n    commentReadCallback(data) {\n      // doing something here\n    }\n  }\n});\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fqiscus%2Fqiscus-sdk-web-core","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fqiscus%2Fqiscus-sdk-web-core","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fqiscus%2Fqiscus-sdk-web-core/lists"}