Search code examples
botframeworkweb-chat

Uncaught TypeError: Cannot read property 'renderWebChat' of undefined

I am creating a web chat which is embedded in an iframe source. What I want is to change the background color of each chat messages (referred to as Chat Bubbles) within that iframe.

Here is my code:

<div id="webchat" role="main">
        <iframe src='https://webchat.botframework.com/embed/...?s=SECRET_KEY_HERE'
        style='min-width: 400px; width: 100%; min-height: 500px;'></iframe>
</div>

<script type="text/javascript">

const styleOptions = {
    bubbleBackground: 'rgba(0, 0, 255, .1)',
    bubbleFromUserBackground: '#ddd'
};

window.WebChat.renderWebChat({
    directLine: window.WebChat.createDirectLine({ secret: 'MY_SECRET_KEY_HERE' }),
    // Passing "styleOptions" when rendering Web Chat
    styleOptions
}, document.getElementById('webchat'));
</script>

PROBLEM:

I am able to see the Iframe and also with the dedicated Secret Key I am able to chat; however, I am not able to see the style applied on chat bubble and on page load I am getting this error:

Uncaught TypeError: Cannot read property 'renderWebChat' of undefined

What is the reason of this?

Solution

  • This won't work, you are mixing two ways of embedding a web chat.

    1. Embed via iFrame
    2. Integrate with JavaScript

    If you want to style your web chat, you would need to use the JavaScript integration. The JavaScript integration has extensive documentation where they show how to start and how to modify the web chat.