Пользовательское фоновое изображение веб-чата - PullRequest
Новая
       9

Пользовательское фоновое изображение веб-чата

0 голосов
/ 11 июля 2019

Я пытаюсь создать своего собственного чат-бота, но не уверен, как изменить фоновое изображение на свой собственный jpg.

Я пытался поместить код в <body> и внутри styleOptionsно ни один из моих методов не работает.

Ниже мой HTML-файл: 

<body style = "background-image: url('CorpBotOrchestrator/Images/whatsapp.jpg');">
    <div id="webchat" role="main">Loading...</div>
    <script>      
          styleOptions: {
            bubbleFromUserBackground: 'LightBlue',
            hideUploadButton: true,
            botAvatarImage: 'https://docs.microsoft.com/en-us/azure/bot-service/v4sdk/media/logo_bot.svg?view=azure-bot-service-4.0',

            //make the speech bubbles round
            bubbleBorderRadius: 20,
            bubbleFromUserBorderRadius: 20,
          }

        }, document.getElementById('webchat'));
      })().catch(err => console.error(err));

    </script>
  </body>

Заранее спасибо!

1 Ответ

0 голосов
/ 16 июля 2019

Вам потребуется создать экземпляр своего веб-чата следующим образом, чтобы изменить фоновое изображение окна действий.Имейте в виду, что в объекте BotFramework-WebChat styleSet есть activity, который представляет отправляемые отдельные сообщения, карточки и т. Д., И activities, который представляет окно прокрутки сообщений.Именно с последним мы будем работать.

Кроме того, имейте в виду, что, поскольку вы непосредственно указываете элемент и свойство DOM, хотя и через веб-чат, если какой-либо аспект веб-чата получит обновление, изменяющееиспользуемый элемент или свойство, это может вызвать серьезные изменения для вас.Кроме того, вам нужно будет передать все значения свойств, необходимые, так как обычно это удаляет все значения по умолчанию из элемента веб-чата, с которым вы работаете. 

const styleSet = createStyleSet ( {
  bubbleBackground: 'blue',
  bubbleFromUserBackground: 'red',

  bubbleBorderRadius: 18,
  bubbleFromUserBorderRadius: 18,
} );

styleSet.activities = {
  ...styleSet.activities,
  backgroundImage: "url('<someUrlLink>')";
}

window.WebChat.renderWebChat( {
  directLine: [...],
  styleSet
});

Надежда на помощь!

...