0

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

先感谢您！

4

1 回答 1

2

您将希望通过以下方式实例化您的网络聊天，以更改活动窗口的背景图像。请注意，在 BotFramework-WebChatstyleSet对象中，有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
});

希望有帮助！

编辑

styleOptions实际上可以使用扩展运算符传入styleSet. 通过这种方式，您可以继续使用styleOptions自定义的易用性，并在很大程度上保持在 Web Chat 的最佳实践中。

const styleOptions = {
  bubbleBackground: 'blue',
  bubbleFromUserBackground: 'red',

  bubbleBorderRadius: 18,
  bubbleFromUserBorderRadius: 18
}

const styleSet = createStyleSet ( {
  ...styleOptions,
} );

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

window.WebChat.renderWebChat( {
  directLine: [...],
  styleSet
});
于 2019-07-16T03:12:20.507 回答