Webchat aanpassen

Artikel
03/08/2023

VAN TOEPASSING OP: SDK v4

In dit artikel wordt beschreven hoe u de Webchat-voorbeelden kunt aanpassen aan uw bot.

Webchat integreren in uw website

In het Webchat-overzicht wordt beschreven hoe u de Webchat kunt integreren in uw website.

Stijlen aanpassen

Het Webchat besturingselement biedt uitgebreide aanpassingsopties: u kunt kleuren, grootten, plaatsing van elementen wijzigen, aangepaste elementen toevoegen en communiceren met de webpagina die als host fungeert. Hieronder ziet u enkele voorbeelden van het aanpassen van de gebruikersinterface van Webchat.

U vindt de volledige lijst met alle instellingen die u kunt wijzigen in Webchat in het StyleOptions.ts bestand. De standaardwaarden voor Webchat vindt u in het bestand defaultStyleOptions.ts

Met deze instellingen wordt een stijlset gegenereerd. Dit is een set CSS-regels die zijn uitgebreid met glamour. U vindt de volledige lijst met CSS-stijlen die zijn gegenereerd in de stijlset in het createStyleSet.ts bestand.

De grootte van de Webchat container instellen

Als u de grootte van de Webchat container wilt aanpassen, gebruikt u de stijlsetrootHeight en rootWidth eigenschappen. In het volgende voorbeeld wordt ook de achtergrondkleur van de container ingesteld om de grootte van de controller weer te geven.

<!DOCTYPE html>
<head>
    <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
</head>
<body>
  <div style="height: 60%; width: 40%; margin-top:5%; margin-left:10%" id="webchat" role="main"></div>
  <script>
     // Set  the CSS rules.
     const styleSet = window.WebChat.createStyleSet({
         rootHeight: '100%',
         rootWidth: '50%',
         backgroundColor: 'paleturquoise'
      });

    window.WebChat.renderWebChat({
      directLine: window.WebChat.createDirectLine({
          token: '<Your Direct Line token>'}),
      styleSet
    }, document.getElementById('webchat'));
    
  </script>
</body>

Stel Webchat in met de hoogte van de hoofdmap en de breedte van de hoofdmap

Waarschuwing

Gebruik uw Direct Line sleutel niet in het zicht op de hostingwebpagina. Gebruik een token zoals wordt uitgelegd in de sectie Productie-insluitingsoptie voor het verbinden van een bot met Webchat.

Lettertype en kleur van chatballon wijzigen

U kunt de achtergrondkleur en de lettertypen die in de chatballonnen worden gebruikt, aanpassen aan de stijl van de webpagina waarop het Webchat besturingselement wordt gehost. In het onderstaande codefragment ziet u hoe u dit doet.

Lettertype en kleur van bellen instellen

<!DOCTYPE html>
<head>
    <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
</head>
<body>
  <div style="height: 60%; width: 40%; margin-top:5%; margin-left:10%" id="webchat" role="main"></div>
  <script>
     
     // Set  the CSS rules.
     const styleSet = window.WebChat.createStyleSet({
         bubbleBackground: 'rgba(0, 0, 255, .1)',
         bubbleFromUserBackground: 'rgba(0, 255, 0, .1)',
         rootHeight: '100%',
         rootWidth: '50%',
         backgroundColor: 'paleturquoise'
      });

      // After generated, you can modify the CSS rules.
      // Change font family and weight. 
      styleSet.textContent = {
         ...styleSet.textContent,
         fontFamily: "'Comic Sans MS', 'Arial', sans-serif",
         fontWeight: 'bold'
      };
    window.WebChat.renderWebChat({
      directLine: window.WebChat.createDirectLine({
          token: '<Your Direct Line token>'}),
      styleSet
    }, document.getElementById('webchat'));
    
  </script>
</body>

Bot en avatars van gebruikers wijzigen

Webchat ondersteunt avatars, die u kunt aanpassen door en in de styleOptions eigenschap in te userAvatarInitials stellenbotAvatarInitials.

<!DOCTYPE html>
<head>
    <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
</head>
<body>
  <div style="height: 60%; width: 40%; margin-top:5%; margin-left:10%" id="webchat" role="main"></div>
  <script>
     
     // Set  the CSS rules.
     const styleSet = window.WebChat.createStyleSet({
         bubbleBackground: 'rgba(0, 0, 255, .1)',
         bubbleFromUserBackground: 'rgba(0, 255, 0, .1)',
         rootHeight: '100%',
         rootWidth: '50%',
         backgroundColor: 'paleturquoise'
      });

      // After generated, you can modify the CSS rules.
      // Change font family and weight. 
      styleSet.textContent = {
         ...styleSet.textContent,
         fontFamily: "'Comic Sans MS', 'Arial', sans-serif",
         fontWeight: 'bold'
      };

    // Set the avatar options. 
     const avatarOptions = {
         botAvatarInitials: 'BF',
         userAvatarInitials: 'WC'
         };

    window.WebChat.renderWebChat({
      directLine: window.WebChat.createDirectLine({
          token: '<Your Direct Line token>'}),
      styleSet,
      styleOptions: avatarOptions
    }, document.getElementById('webchat'));
    
  </script>
</body>

Gebruik de botAvatarInitials eigenschap om de avatar initialen voor de bot in te stellen, die aan de linkerkant van het besturingselement wordt weergegeven. Gebruik de userAvatarInitials eigenschap om de avatarletters voor de gebruiker in te stellen, die aan de rechterkant worden weergegeven.

Gebruik de botAvatarImage eigenschappen en userAvatarImage om afbeeldings-URL's op te geven voor de bot en avatars van gebruikers. Het besturingselement geeft deze weer in plaats van de initialen, zoals hieronder wordt weergegeven.

const avatarOptions = {
   botAvatarImage: '<URL to your bot avatar image>',
   botAvatarInitials: 'BF',
   userAvatarImage: '<URL to your user avatar image>',
   userAvatarInitials: 'WC'
};

Aangepaste renderingactiviteit of bijlage

Met de nieuwste versie van Webchat kunt u ook activiteiten of bijlagen weergeven die Webchat niet out-of-the-box ondersteunt. De weergave van activiteiten en bijlagen wordt verzonden via een aanpasbare pijplijn die is gemodelleerd naar Redux-middleware. De pijplijn is flexibel genoeg om de volgende taken eenvoudig uit te voeren:

Bestaande activiteiten/bijlagen versieren
Nieuwe activiteiten/bijlagen toevoegen
Bestaande activiteiten/bijlagen vervangen (of verwijderen)
Daisy chain middleware samen

GitHub-opslagplaats als bijlage weergeven

Als u bijvoorbeeld een reeks GitHub-opslagplaatskaarten wilt weergeven, kunt u een nieuw React-onderdeel maken voor de GitHub-opslagplaats en dit toevoegen als middleware. De volgende afbeeldings- en codefragmenten zijn afkomstig uit het voorbeeld van het voorbeeld van de customization-card-components.

Hier volgt de uitvoer wanneer u het standaardbericht invoert: sample:github-repository.

aangepaste github-opslagplaatsbijlagen

Als u help invoert, krijgt u de selectie van alle kaarten die u kunt kiezen. Dit is een van de vele voorbeelden:

aangepaste afbeeldingsbijlage

import ReactWebChat from 'botframework-webchat';
import ReactDOM from 'react-dom';

// Create a new React component that accept render a GitHub repository attachment
const GitHubRepositoryAttachment = props => (
   <div
      style={{
         fontFamily: "'Calibri', 'Helvetica Neue', Arial, sans-serif",
         margin: 20,
         textAlign: 'center'
      }}
   >
      <svg
         height="64"
         viewBox="0 0 16 16"
         version="1.1"
         width="64"
         aria-hidden="true"
      >
         <path
            fillRule="evenodd"
            d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"
         />
      </svg>
      <p>
         <a
            href={`https://github.com/${encodeURI(props.owner)}/${encodeURI(
               props.repo
            )}`}
            target="_blank"
         >
            {props.owner}/<br />
            {props.repo}
         </a>
      </p>
   </div>
);

// Creating a new middleware pipeline that will render <GitHubRepositoryAttachment> for specific type of attachment
const attachmentMiddleware = () => next => card => {
   switch (card.attachment.contentType) {
      case 'application/vnd.microsoft.botframework.samples.github-repository':
         return (
            <GitHubRepositoryAttachment
               owner={card.attachment.content.owner}
               repo={card.attachment.content.repo}
            />
         );

      default:
         return next(card);
   }
};

ReactDOM.render(
   <ReactWebChat
      // Prepending the new middleware pipeline
      attachmentMiddleware={attachmentMiddleware}
      directLine={window.WebChat.createDirectLine({ token })}
   />,
   document.getElementById('webchat')
);

In dit voorbeeld voegen we een nieuw React-onderdeel toe met de naam GitHubRepositoryAttachment:

const GitHubRepositoryAttachment = props => (
   <div
      style={{
         fontFamily: "'Calibri', 'Helvetica Neue', Arial, sans-serif",
         margin: 20,
         textAlign: 'center'
      }}
   >
      <svg
         height="64"
         viewBox="0 0 16 16"
         version="1.1"
         width="64"
         aria-hidden="true"
      >
         <path
            fillRule="evenodd"
            d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"
         />
      </svg>
      <p>
         <a
            href={`https://github.com/${encodeURI(props.owner)}/${encodeURI(
               props.repo
            )}`}
            target="_blank"
         >
            {props.owner}/<br />
            {props.repo}
         </a>
      </p>
   </div>
);

Vervolgens maken we een middleware die de nieuwe React-onderdeel weergeeft wanneer de bot een bijlage van het inhoudstype application/vnd.microsoft.botframework.samples.github-repositoryverzendt. Anders wordt de middleware voortgezet door aan te roepen next(card).

const attachmentMiddleware = () => next => card => {
   switch (card.attachment.contentType) {
      case 'application/vnd.microsoft.botframework.samples.github-repository':
         return (
            <GitHubRepositoryAttachment
               owner={card.attachment.content.owner}
               repo={card.attachment.content.repo}
            />
         );

      default:
         return next(card);
   }
};

De activiteit die vanuit de bot wordt verzonden, ziet er als volgt uit:

{
   "type": "message",
   "from": {
      "role": "bot"
   },
   "attachmentLayout": "carousel",
   "attachments": [
      {
         "contentType": "application/vnd.microsoft.botframework.samples.github-repository",
         "content": {
            "owner": "Microsoft",
            "repo": "BotFramework-WebChat"
         }
      },
      {
         "contentType": "application/vnd.microsoft.botframework.samples.github-repository",
         "content": {
            "owner": "Microsoft",
            "repo": "BotFramework-Emulator"
         }
      },
      {
         "contentType": "application/vnd.microsoft.botframework.samples.github-repository",
         "content": {
            "owner": "Microsoft",
            "repo": "BotFramework-DirectLineJS"
         }
      }
   ]
}

Delen via