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

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>

enter image description here enter image description here enter image description here

c++sharpbotframeworkweb-chat


Solution 1:[1]

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));

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 The Memebot

Related Questions