自定义网络聊天背景图片

时间:2019-07-11 06:13:31

标签: botframework web-chat

我正在尝试制作自己的聊天机器人,但不确定如何将背景图像更改为自己的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 :(得分:0)

您将要以以下方式实例化网络聊天,以更改活动窗口的背景图像。请注意,在BotFramework-WebChat styleSet对象中,有activity代表发送的各个消息,卡片等,还有activities代表窗口滚动消息。我们将使用后者。

另外,请注意,由于您是通过网络聊天直接指定DOM元素和属性,因此如果网络聊天的某些方面收到了更改所使用的元素或属性的更新,则可能对您造成重大更改。此外,您将需要传递所有必要的属性值,因为通常,这会从正在使用的webchat元素中剥离所有默认值。

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

  bubbleBorderRadius: 18,
  bubbleFromUserBorderRadius: 18,
} );

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

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

希望有帮助!