Webchat aanpassing

Artikel
2024-10-09

VAN TOEPASSING OP: SDK v4

In dit artikel wordt beschreven hoe u de Webchat voorbeelden aanpast aan uw bot.

Webchat integreren in uw website

In het Webchat overzicht wordt beschreven hoe u het besturingselement voor Webchat integreert 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 hostingwebpagina. Hieronder ziet u verschillende voorbeelden van het aanpassen van de gebruikersinterface van Webchat.

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

Met deze instellingen wordt een stijlset gegenereerd. Dit is een set CSS-regels die zijn verbeterd met glamor. 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 stijlset rootHeight 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 hoofdhoogte en hoofdbreedte

Waarschuwing

Gebruik op de hostingwebpagina uw Direct Line-sleutel niet in zicht. 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 chatballen worden gebruikt aanpassen aan de stijl van de webpagina waarop het Webchat besturingselement wordt gehost. In het onderstaande codefragment ziet u hoe u dit kunt doen.

Lettertype en kleur voor 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 gebruikers avatars wijzigen

Webchat ondersteunt avatars, die u kunt aanpassen door en userAvatarInitials in de eigenschap in te styleOptions 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 in te stellen voor de bot, die aan de linkerkant van het besturingselement wordt weergegeven. Gebruik de userAvatarInitials eigenschap om de avatar-initialen in te stellen voor de gebruiker, die aan de rechterkant wordt weergegeven.

Gebruik de botAvatarImage en userAvatarImage eigenschappen om afbeeldings-URL's op te geven voor de bot en avatars van gebruikers. In het besturingselement worden deze weergegeven 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 geen out-of-the-box ondersteunt. Activiteiten en bijlagen worden verzonden via een aanpasbare pijplijn die is gemodelleerd na 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 weergeven als bijlage

Als u bijvoorbeeld een presentatie met GitHub-opslagplaatskaarten wilt weergeven, kunt u een nieuw React-onderdeel maken voor de GitHub-opslagplaats en deze toevoegen als middleware. De volgende afbeelding en codefragmenten zijn afkomstig uit het voorbeeld van het voorbeeld van het voorbeeld van de aanpassingskaartonderdelen.

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

Aangepaste github-opslagplaatsbijlagen

Als u hulp invoert bij het verkrijgen van 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 het nieuwe React-onderdeel weergeeft wanneer de bot een bijlage van het inhoudstype application/vnd.microsoft.botframework.samples.github-repositoryverzendt. Anders blijft deze op de middleware staan 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