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

Any update on this?

Thanks,
Neha Sheikh

Were you able to check this?

Thanks,
Neha Sheikh

Hi @nehamsheikh,

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

Regards,
Yoga Ramya.

Hi,

Any update on this one?

Thanks,
Neha Sheikh

Hi Neha,

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

We appreciate your patience.

Regards,
Yoga Ramya.

Still waiting. :slight_smile:

Thanks,
Neha Sheikh

I am still waiting :slight_smile:

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

Expecting early help on this.

Thanks,
neha Sheikh

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”

customButton

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

customButtonTemplate

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.

customButtonTemplate2

This would return the variable that has the template.

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

image%20(4)

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.

1 Like

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.

image
image

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.

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.

image

Hi @tacarey,

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

image

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.

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:

image

Thank you for your thoughts.

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.

Regards,
Yoga Ramya.

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.

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??

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.

@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:
image

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

3 Likes

Can a text field possible in a template?