nfreear/webchat.template.html

## webchat.template.html
<!doctype html><html lang="en" data-secret-key="__EDIT_ME__" >

  <title>Web Chat: Customizing thru style options</title>

  <style>
    html, body { color: #444; font: 1rem sans-serif; height: 100%; }
    body { margin: 0; }
    h1 { font-weight: normal; margin: .2rem 1rem; }
    #webchat,
    #webchat > * {
      height: 95%;
      x-height: 99.5%;
      width: 99.7%;
    }
    .style-default #webchat { border: 1px solid #ccc; }
    .style-wb #webchat { border: 2px solid orange; }
    .loading { text-align: center; margin: 4rem 0; }
  </style>

  <h1 lang="en-GB"> Chat Bot </h1>


  <div id="webchat">
    <h2 class="loading" lang="en-GB"> Loading &hellip; </h2>
  </div>


  <script src="https://cdn.botframework.com/botframework-webchat/master/webchat.js"></script>

  <script>
    // See :~ https://github.com/microsoft/BotFramework-WebChat/blob/master/packages/component/src/Styles/defaultStyleOptions.js

    const styleOptions_WB = {
        backgroundColor: 'Black',
        bubbleBackground: '#222',
        bubbleBorder: 'solid 1px #444',
        bubbleBorderRadius: 20,
        bubbleFromUserBackground: '#222',
        bubbleFromUserBorder: 'solid 1px #444',
        bubbleFromUserBorderRadius: 20,
        bubbleFromUserTextColor: 'White',
        bubbleTextColor: 'White',

        botAvatarInitials: 'Bot',   // 'ID'
        userAvatarInitials: 'Nick', // 'ID'
    };

    const styleOptions_Default = {
      botAvatarInitials: 'Bot',   // 'ID'
      userAvatarInitials: 'Nick', // 'ID'
    }

    /* window.WebChat.renderWebChat({
        directLine: window.WebChat.createDirectLine({ secret: 'YOUR_BOT_SECRET_FROM_AZURE' }),
        styleOptions
    }, document.getElementById('webchat')); */

  </script>

  <script>
    const SECRET_KEY = document.querySelector('[ data-secret-key ]').dataset.secretKey;
    const WebChat = window.WebChat;

    const styleIsWb = param(/style=(wb)/);
    const locale = param(/[\?&]locale=(.+)/, 'en-US');

    document.body.classList.add(`style-${ styleIsWb ? 'wb' : 'default' }`);
    document.body.parentElement.lang = locale;

    WebChat.renderWebChat(
      {
        directLine: WebChat.createDirectLine({
          secret: SECRET_KEY,
          // token: 'YOUR_DIRECT_LINE_TOKEN'
        }),
        userID: 'YOUR_USER_ID',
        username: 'Web Chat User',
        locale,
        // botAvatarInitials: 'WC',
        // userAvatarInitials: 'WW'
        styleOptions: styleIsWb ? styleOptions_WB : styleOptions_Default,

        debug: true,
        logLevel: 'debug',  // ??
      },
      document.getElementById('webchat')
    );

    console.warn('WebChat:', WebChat)

    function param(regex, def = null) {
      const matches = window.location.href.match(regex);
      return matches ? matches[ 1 ] : def;
    }
    </script>

<!--

  See :~  https://github.com/microsoft/BotFramework-WebChat/blob/master/README.md#how-to-use

  Source :~  https://gist.github.com/nfreear/83e5fcd9be053fecf21cb7af2a6c67b0

-->
	<!doctype html><html lang="en" data-secret-key="__EDIT_ME__" >

	<title>Web Chat: Customizing thru style options</title>

	<style>
	html, body { color: #444; font: 1rem sans-serif; height: 100%; }
	body { margin: 0; }
	h1 { font-weight: normal; margin: .2rem 1rem; }
	#webchat,
	#webchat > * {
	height: 95%;
	x-height: 99.5%;
	width: 99.7%;
	}
	.style-default #webchat { border: 1px solid #ccc; }
	.style-wb #webchat { border: 2px solid orange; }
	.loading { text-align: center; margin: 4rem 0; }
	</style>

	<h1 lang="en-GB"> Chat Bot </h1>


	<div id="webchat">
	<h2 class="loading" lang="en-GB"> Loading … </h2>
	</div>


	<script src="https://cdn.botframework.com/botframework-webchat/master/webchat.js"></script>

	<script>
	// See :~ https://github.com/microsoft/BotFramework-WebChat/blob/master/packages/component/src/Styles/defaultStyleOptions.js

	const styleOptions_WB = {
	backgroundColor: 'Black',
	bubbleBackground: '#222',
	bubbleBorder: 'solid 1px #444',
	bubbleBorderRadius: 20,
	bubbleFromUserBackground: '#222',
	bubbleFromUserBorder: 'solid 1px #444',
	bubbleFromUserBorderRadius: 20,
	bubbleFromUserTextColor: 'White',
	bubbleTextColor: 'White',

	botAvatarInitials: 'Bot', // 'ID'
	userAvatarInitials: 'Nick', // 'ID'
	};

	const styleOptions_Default = {
	botAvatarInitials: 'Bot', // 'ID'
	userAvatarInitials: 'Nick', // 'ID'
	}

	/* window.WebChat.renderWebChat({
	directLine: window.WebChat.createDirectLine({ secret: 'YOUR_BOT_SECRET_FROM_AZURE' }),
	styleOptions
	}, document.getElementById('webchat')); */

	</script>

	<script>
	const SECRET_KEY = document.querySelector('[ data-secret-key ]').dataset.secretKey;
	const WebChat = window.WebChat;

	const styleIsWb = param(/style=(wb)/);
	const locale = param(/[\?&]locale=(.+)/, 'en-US');

	document.body.classList.add(`style-${ styleIsWb ? 'wb' : 'default' }`);
	document.body.parentElement.lang = locale;

	WebChat.renderWebChat(
	{
	directLine: WebChat.createDirectLine({
	secret: SECRET_KEY,
	// token: 'YOUR_DIRECT_LINE_TOKEN'
	}),
	userID: 'YOUR_USER_ID',
	username: 'Web Chat User',
	locale,
	// botAvatarInitials: 'WC',
	// userAvatarInitials: 'WW'
	styleOptions: styleIsWb ? styleOptions_WB : styleOptions_Default,

	debug: true,
	logLevel: 'debug', // ??
	},
	document.getElementById('webchat')
	);

	console.warn('WebChat:', WebChat)

	function param(regex, def = null) {
	const matches = window.location.href.match(regex);
	return matches ? matches[ 1 ] : def;
	}
	</script>

	<!--

	See :~ https://github.com/microsoft/BotFramework-WebChat/blob/master/README.md#how-to-use

	Source :~ https://gist.github.com/nfreear/83e5fcd9be053fecf21cb7af2a6c67b0

	-->