Bot framework Webchat Postback buttons show the text on the chat after I click them

Question

Webchat version: 4.15.1 using CDN,

Description: I am using HeroCards with postback buttons but they show the text in the value after I click them, It also happens with SuggestedActions. Since in some cases I am using special codes I need to hide them from the user

Code of the cards:

 private async Task<DialogTurnResult> ProcesarEnvioMenu(WaterfallStepContext stepContext, CancellationToken cancellationToken)
        {
            var tarjetaNecesitoPrueba = new HeroCard()
            {
                Buttons = new List<CardAction>()
                    {
                        new CardAction()
                        {
                           Title = "Pruebas",
                           Type = ActionTypes.PostBack,
                           Value = "Pruebas"
                        }
                    },
                Images = new List<CardImage>()
                    {
                        new CardImage()
                        {
                            Url="https://chatbotfcsblobstorage2.blob.core.windows.net/imagenes/63de5d7e-bf00-498f-bb1a-84c16feef299.png"
                        }
                    },
                Title = "Necesito una prueba diagnóstica ",
                Subtitle = "para saber si tengo COVID"
            }.ToAttachment();


            var mensaje = stepContext.Context.Activity.CreateReply($"Por favor elige la opción que deseas o si lo prefieres hazme una pregunta directamente.");
            mensaje.Attachments = new List<Attachment>();
            mensaje.AttachmentLayout = AttachmentLayoutTypes.Carousel;
            mensaje.Attachments.Add(tarjetaNecesitoPrueba);
      
            await stepContext.Context.SendActivityAsync(mensaje, cancellationToken: cancellationToken);

            return await stepContext.EndDialogAsync();
        }

Code of the webchat:

<!DOCTYPE html> <html> <head>
    <script src="https://cdn.botframework.com/botframework-webchat/4.15.1/webchat.js"></script>
   
    <style>
        html,
        body {
            height: 100%;
        }

        body {
            margin: 0;
        }

        #webchat {
            height: 100%;
            width: 100%;
        }
    </style> </head> <body>
   
    <div id="webchat" role="main"></div>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <script>

    
     const styleSet = window.WebChat.createStyleSet({
         rootHeight: '100%',
         rootWidth: '100%',

        
         bubbleFromUserBackground: '#EA431C',
         bubbleFromUserBorderRadius: 15,
         bubbleFromUserBorderColor: '#EA431C',
         bubbleFromUserTextColor: 'White',

         bubbleBackground: '#24B5B1',
         bubbleBorderRadius: 15,
         bubbleBorderColor: '#24B5B1',
         bubbleTextColor: 'White',

         sendBoxButtonColor: '#0063B1',
         sendBoxBorderBottom: 'solid 1px #006FBA',
         sendBoxBorderLeft: 'solid 1px #006FBA',
         sendBoxBorderRight: 'solid 1px #006FBA',
         sendBoxBorderTop: 'solid 1px #006FBA',

         suggestedActionBackgroundColor: '#EA431C',
         suggestedActionBorderColor: '#EA431C',
         suggestedActionBorderColor: 'White',
         suggestedActionTextColor: 'White',
         suggestedActionBorderStyle: 'none',
         suggestedActionBorderRadius: 5,
      

      });



        styleSet.textContent = {
            ...styleSet.textContent,
            fontFamily: "'Gotham', 'Calibri', 'Helvetica Neue', 'Arial', 'sans-serif'",
            fontColor: 'White'
        };

        const avatarOptions = {
            botAvatarBackgroundColor: '#FE9913',
            botAvatarImage: 'https://wikiaprendofcscontainer.blob.core.windows.net/imagenes/wikiaprendo/logowikiaprendofcs.png',
            botAvatarInitials: 'BF',
         
            hideUploadButton: true,
            
        };
        (async function () {
        const store = window.WebChat.createStore({}, ({ dispatch }) => next => action => {
               if (action.type === 'DIRECT_LINE/CONNECT_FULFILLED') {
                     dispatch({
                        type: 'WEB_CHAT/SEND_EVENT',
                        payload: {
                            name: 'webchat/join'
                       }
                 });
           }

        return next(action);   });

            const token = '@ViewBag.Token';
            var d1 = window.WebChat.createDirectLine({ token })

            window.WebChat.renderWebChat({
                directLine: Object.assign({}, d1, {
                    postActivity: activity => {
                        var newActivity = Object.assign({}, activity, { channelData: { "MonitorId": "@ViewBag.IdMonitor" } });
                        return d1.postActivity(newActivity);
                    }
                }),
                styleSet,
                styleOptions:avatarOptions,
                store,
                sendTypingIndicator:true

            }, document.getElementById('webchat'));

            document.querySelector('#webchat > *').focus();
        })().catch(err => console.error(err));

    </script> </body> </html>

@stuartd in Microsoft's bot framework the usual way of working of the postback buttons is that they sent the info to the chatbot hidden from the user, when you want to show that info to the users you need to use imBack buttons — The Memebot, May 05 '22 at 02:04

score 0 · Accepted Answer · answered May 19 '22 at 00:41

The error was in the webchat configuration on the html file. This is the right way of having a welcome message AND passing arguments to a chatbot in the channel data

 (async function () {
         const token = '@ViewBag.Token';
            var d1 = window.WebChat.createDirectLine({ token });
            const store = window.WebChat.createStore({}, ({ dispatch }) => next => action => {
                if (action.type === 'DIRECT_LINE/CONNECT_FULFILLED') {
                    dispatch({
                        type: 'WEB_CHAT/SEND_EVENT',
                        payload: {
                            name: 'webchat/join',
                            value: { language: window.navigator.language }
                        }
                    });
                }

                if (action.type === 'DIRECT_LINE/POST_ACTIVITY') {
                    action = window.simpleUpdateIn(
                        action,
                        ['payload', 'activity', 'channelData', 'MonitorId'],
                        () => '@ViewBag.IdMonitor'
                    );
                }

                return next(action);
            });

            window.WebChat.renderWebChat(
                {
                    directLine: window.WebChat.createDirectLine({ token }),
                    store,
                    styleSet,
                    styleOptions: avatarOptions
                },
                document.getElementById('webchat')
            );

            document.querySelector('#webchat > *').focus();
        })().catch(err => console.error(err));

Bot framework Webchat Postback buttons show the text on the chat after I click them

1 Answers1