Is there a way to show list of items and allow multiple selection from the list?

[nehamsheikh (Neha Sheikh)]

Any update on this?

Thanks,
Neha Sheikh

[nehamsheikh (Neha Sheikh)]

Were you able to check this?

Thanks,
Neha Sheikh

[yogaramya.mendu]

Hi @nehamsheikh,

We are working on it. We will update you by EOD today.

Regards,
Yoga Ramya.

[nehamsheikh (Neha Sheikh)]

Hi,

Any update on this one?

Thanks,
Neha Sheikh

[yogaramya.mendu]

Hi Neha,

As mentioned to you, we will update the steps shortly.

We appreciate your patience.

Regards,
Yoga Ramya.

[nehamsheikh (Neha Sheikh)]

Still waiting.

Thanks,
Neha Sheikh

[nehamsheikh (Neha Sheikh)]

I am still waiting

[nehamsheikh (Neha Sheikh)]

Anything on this?
I have been waiting since a long time for this.

Expecting early help on this.

Thanks,
neha Sheikh

[yogaramya.mendu]

Hi @nehamsheikh,

We apologize for the delay and appreciate your patience.

Please find the below implementation steps to create a custom template:

We are giving an example of creating a copy of the existing button template as a custom template.

1- Create a task with a message node.
2- Add a web/mobile client response to the message node, navigate to the javascript tab in the response and add the following code:

var info = ["Custom Button1", "Custom Button2", "Custom Button3"];

var message = {
“type”: “template”,
“payload”: {
“template_type”: “customButton”,
“text”: “Custom Button Template (getDetails task))”,
“subText”: “Button Template Description”,
“buttons”: []
}
};
for (i = 0; i < info.length; i++) {
// if the button is to send back text to platform
var button = {
“type”: “postback”,
“title”: info[i],
“payload”: “payload”+(i+1)
};

/* Uncomment this if the button is to redirect to url
 var button = {
 "type":"web_url", // type can be "postback" if
 "url":"URL_TO_REDIRECT",
 "title":buttons[i]
 };
 */

message.payload.buttons.push(button);

}
print(JSON.stringify(message));

This is the same javascript which would be generated when you select the button template from the templates drop-down.

We will need to change the “template_type” name to customButton.

2- In the SDKApp folder, open the customTemplate.js file available in SDKApp/sdk/UI/custom/customTemplate.js

3- You can observe the sample code commented in the file. Uncomment the function customTemplate.prototype.renderMessage = function (msgData).

4- In function: customTemplate.prototype.renderMessage = function (msgData)
ensure that the template type name is changed to “customButton”

msgData.message[0].component.payload.template_type == “customButton”

5- This function internally calls
this.getChatTemplate(“customButtonTemplate”) which actually returns the custom template. (Replace “templatebutton” with “customButtonTemplate” here.

6- Uncomment the function customTemplate.prototype.getChatTemplate = function(tempType) .

7- This function has the template definition in the variable customButtonTemplate. The template definition here is the jquery code in this case which creates the template structure. (If you are writing your custom template then, the structural code goes here).

8- Replace the var templateButton with the customButtonTemplate. Make the changes as per the image.

This would return the variable that has the template.

So, implementing as above would invoke the customButtonTemplate when the message node is executed.

Summarizing the above, to create a custom template:

• You will need to define the template in the customTemplate.prototype.getChatTemplate = function(tempType) function.
• Write the Jquery code to structure the template and assign it to a javascript variable. The CSS for the template can be defined in the customTemplate.css file.
• In the customTemplate.prototype.renderMessage = function (msgData), change the template_type name to your customTemplate name and as mentioned this function will take the variable data and create the template structure.
• In the message node, you can write the javascript to pass data to the template. (This will be your business logic).

Hope this helps!!

Please accept our humble apologies for the delay. We were just trying to get a better work.

Regards,
Yoga Ramya.

[tacarey (Tamira Carey)]

Hi @yogaramya.mendu,

I have followed the steps listed in the URL link you provided, download the web client SDK, and published my bot. Unfortunately, I am unable to see the buttons under the button label, as shown below. I am getting the following error: “The bot is disabled via Web/Mobile Client. You can still talk to the bot via Web/Mobile Client.” What is this message referring to and how do I troubleshoot my button issue. Thanks for your response.

[yogaramya.mendu]

Hi @tacarey,

Please let us know if the button template is working as expected in the bot builder chat window.

Also, this error occurs when there is any issue in the button template script.

We request you to kindly check the script and let us know.

Regards,
Yoga Ramya.

[tacarey (Tamira Carey)]

Hi @yogaramya.mendu,

I have published the bot and tried to configure a web client SDK to see the multiple selection button. I am getting the below error. I used the steps aligned here: https://developer.kore.ai/docs/bots/sdks/kore-ai-web-sdk-tutorial/

Thank you for your thoughts.

[yogaramya.mendu]

Hi @tacarey,

After executing the command node startServer.js, please open localhost:3000 in the web browser >> new tab as mentioned in the documentation.

In the web browser, if you are not observing the chat window in localhost:3000/UI, then let us know.

Also, kindly let us know if you need any further clarification on the above.

Regards,
Yoga Ramya.

[tacarey (Tamira Carey)]

Hi @yogaramya.mendu,

I am unable to view the chat window in the web browser in localhost:3000/UI. I am getting to following errors:

Thank you for your thoughts.

[yogaramya.mendu]

Hi @tacarey,

Please refer the following post and integrate the WebSDK as per steps mentioned. Try to download a fresh copy of websdk in case something got messed up in your existing setup.

Facing issue while integrating bot with web/mobile client channel

Hi @mitalee.jadhav, Please re-check if you have implemented the following steps as per the instructions: As mentioned on Step 17, you have downloaded the SDKApp. As mentioned on Step 19, you have configured the index.html. Try with “isAnonymous”: true also. As JWT URL try with http://localhost:3000/api/users/sts . Note: SDKApp and WebSDK are different. Please ensure that you have unzipped the content of WebSDK into SDKApp/sdk (example: Under C:\KoreWDSK\SDKApp\sdk you should be able to see …

Regards,
Yoga Ramya.

[hareen.yalavarti (Yalavarti Hareen Tej)]

Hey,

I was trying for the same, but looks the code in the customtemplate.js which is present in github now is different from the one that is in the screenshots that are presented here. More over in the node when i select the web/mobile app channel, the template dropdown menu shows around 6-8 templates to choose from. but the code that is available have only three.

[tvolker (Thomas Volker)]

Is there an updated Kore.ai solution for multiple button selection yet, without using an external source like hosting your own SDK etc.? Ay kore.ai built in features??

[swagata.sengupta (Swagat)]

Thomas, as of now there is no off the shelf multiple button selection available yet. It needs customization. You may use a widget (external configuration) and pass on the selected values as comma separated values for a list of value.

[Subrahmanyam (Subrahmanyam Donepudi)]

@tvolker Please refer to the custom template - “Multi-Select” provided at https://github.com/Koredotcom/web-kore-sdk/blob/master/UI/custom/customTemplate.js The CSS support for this template is added here: https://github.com/Koredotcom/web-kore-sdk/blob/master/UI/custom/customTemplate.css

Sample Code Snippet:

var message = {
		"type": "template",
		"payload": {
		"template_type": "multi_select",
		"elements": [
		{
		"title": "Classic T-Shirt Collection",
		"value":"tShirt"
		},{
		"title": "Classic Shirt Collection",
		"value":"shirts"
		},
		{
		"title": "Classic shorts Collection",
		"value":"shorts"
		}
		],
		"buttons": [
		{
		"title": "Done",
		"type": "postback",
		"payload": "payload" 
		}
		] 
		}
		};
		print(JSON.stringify(message)); 

Output when rendered on webSDK:

Please note that the custom templates are provided for you at webSDK to refer and build your own templates.

Refer to below topic on developer docs for more details:
https://developer.kore.ai/docs/bots/sdks/message-templates/#Custom_Templates

[renisweta1094 (Reni Sweta)]

Can a text field possible in a template?