• Sichere Verbindungen
• Ovale Aktionsschaltflächen
• Vorlesen von Skillantworten
• Sharing von Anhängen
• Deaktivierung von Klicks auf vorherige Nachrichten (außerhalb des Fokus)
• Automatische Vervollständigung der Benutzereingabe

    <script>
        var chatWidgetSettings = {
            showConnectionStatus: true,
            conversationBeginPosition: 'bottom',
            openChatOnLoad: true,
            position: {bottom: '2px', right: '2px'},
            displayActionAsPills: true,
            initUserHiddenMessage: 'Hello',
            embedded: true,
            targetElement: 'chat-container',    
            embedTopScrollId: 'top-text',
            customHeaderElementId: 'custom-header',
            botButtonIcon: 'images/bot-button.png', 
            logoIcon: 'images/bot-white.png', 
            botIcon: 'images/bot-green.png',        
            personIcon: 'images/user-icon.png',
            URI: YOUR_URI,
            channelId: YOUR_CHANNELID,

         };

...
    </script>

chatWidgetSettings = {
    URI: 'idcs-oda-example.com',
    channelId: '9999b1-f99a-9999-999ee-df9d99999d',
    enableSpeech: true
};

• Von einem Skill initiierte Unterhaltung imitieren.
• Inhalt im oberen und unteren Bereich des Chatfensters einbetten, der entweder gescrollt wird oder statisch (angeheftet) ist.
• Das Gebietsschema festlegen.
• Debug-Modus festlegen.
• Das Gebietsschema und die Stimme für die Sprachsynthese festlegen.

<div id="top-text" style="padding: 0; text-align: initial">
<p>Talk to Pizzabot to order your pizza.</p>
</div>

hotkeys: {
        collapse: 'c',  // Usage: press Alt + C to collapse the chat widget when chat widget is expanded
        launch: 'l'     // Usage: press Alt + L to launch the chat widget when chat widget is collapsed
    }

"i18n": {
                "en-us": {
                    "chatTitle": "Pizza King"
                }
            } 

var settings = {
    URI: '...',
    channelId: '...',
    initUserHiddenMessage: 'Hello',
    initMessageOptions: {
        sendAt: 'init'
    }
}
Bots = new WebSDK(settings);
Bots.connect();

initUserProfile : {
    profile:{
    givenName: 'First',
    surname: 'Last',
    email: 'first.last@example.com',
    properties: {
        lastOrderedItems: '1 medium pepperoni'
    }
}

{ onclick: <function>, target: 'string' }

['audio', 'file', 'location', 'visual']

        <div id="chat-container" class="chatbox" 
            style="height: 600px; width: 400px; padding: 0;
            text-align: initial">
        </div>

{
weekday:'long',
year:'numeric',
month: 'long',
day: 'numeric'

}

1. Definieren Sie in settings.js ein delegate-Objekt mit einer beforeDisplay-Callback-Funktion in der var chatWidgetSettings-Deklaration:

   delegate: {
               beforeDisplay: function (message) {
                   var messagePayload = message && message.messagePayload;
                   if (messagePayload.type === 'text') {
                       messagePayload.text = splitParagraph(messagePayload.text);
                   }
                   return message;
               }
           }

   Wenn die Nachricht den Typ text aufweist, ruft beforeDisplay die benutzerdefinierte Funktion splitParagraph auf, um den Text nach dem ersten Absatz aufzuteilen.
2. Deklarieren Sie die Variablen für die benutzerdefinierten splitParagraph- und toggleParagraph-View-Funktionen:

   var PREFIX_DOTS = 'dots_';
   var PREFIX_MORE = 'more_';
   var PREFIX_TOGGLE = 'toggle_button';

3. Fügen Sie den splitParagraph-Funktionsausdruck und die toggleParagraphView-Funktion hinzu.
   splitParagraph ist ein IIFE-Ausdruck (Sofort aufgerufener Funktionsausdruck), der die Variable globalIDCounter isoliert, sodass nur die Funktion splitParagraph darauf zugreifen kann. Der Code identifiziert einen Absatz ("\n\n") und teilt den Text entsprechend auf. Anschließend werden drei Punkte (...) hinzugefügt, um anzuzeigen, dass mehr Text angezeigt wird, und eine Schaltfläche "Mehr lesen", um den verbleibenden Text auszublenden.
   

   
   Beschreibung der Abbildung ellipsis-readmore.png

   
   

   var splitParagraph = (function () {
       var globalIDCounter = 0;
   
       return function splitParagraph(text) {
           var paragraphs = text.split('\n\n');
   
           if (paragraphs.length > 1) {
               var HTMLText = '<p>' + paragraphs[0] +
                   '<span id="' + PREFIX_DOTS + globalIDCounter + '">...</span></p>' +
                   '<span id="' + PREFIX_MORE + globalIDCounter + '" class="more">';
   
               for (var i = 1; i < paragraphs.length; i++) {
                   HTMLText += '<p>' + paragraphs[i] + '</p>';
               }
   
               HTMLText += '</span><button id="' + PREFIX_TOGGLE + globalIDCounter + '" class="readMore" onclick="toggleParagraphView(' + globalIDCounter + ')">Read More</button>';
   
               globalIDCounter++;
               return HTMLText;
           } else {
               return text;
           }
       }
   })();
   
   function toggleParagraphView(elemID) {
       var dots = document.getElementById(PREFIX_DOTS + elemID);
       var textMore = document.getElementById(PREFIX_MORE + elemID);
       var buttonToggle = document.getElementById(PREFIX_TOGGLE + elemID);
   
       if (!dots || !textMore || !buttonToggle) {
           return;
       }
   
       if (dots.style.display === 'none') {
           dots.style.display = 'inline';
           buttonToggle.innerText = 'Read More';
           textMore.style.display = 'none';
       } else {
           dots.style.display = 'none';
           buttonToggle.innerText = 'Read Less';
           textMore.style.display = 'inline';
       }
   }

4. Konfigurieren und (optional) formatieren Sie die Schaltflächen "Mehr lesen" und "Weniger lesen". Das CSS enthält einen display:none-Stil, um Schaltflächen je nach Status der langen Textanzeige ein- oder auszublenden.
   • Wenn Sie die Schaltflächen nicht formatieren möchten, fügen Sie den folgenden Code hinzu:

     <style>
     .more {
       display: none;
     }
     </style>

   • Wenn Sie die Schaltflächen formatieren möchten, können Sie Folgendes tun:

     <style>
     .readMore {
       color: #fff !important;
       background-color: red;
       font-size: 12pt;
       padding: 4px;
       outline: 0;
       -moz-outline: 0;
       border: 0;
     }
     
     .readMore:hover {
       color: #fff !important;
       background-color: #606060 !important;
     }
     .more {
       display: none;
     }
     </style>

• Die Position des Widgets auf der Webseite festlegen.
• Die Dimensionen, die Farben und den Schriftschnitt für das Chatwidget festlegen.
• Den Abstand für die Nachrichten im Widget festlegen.
• Die Position des Benachrichtigungsbadgesymbols in Bezug auf die Botschaltfläche festlegen.
• Die Startposition für die Unterhaltung im Widget festlegen.

     <script>
        var chatWidgetSettings = {
            URI: YOUR_URI,
            channelId: YOUR_CHANNELID,
            font: '14px "Helvetica Neue", Helvetica, Arial, sans-serif', //layout modification property
            height: '60vh', //layout modification property
            width: '20vw',  //layout modification property
             "colors": {    //custom colors property  
                "branding": "#01538A",
                "text": "#B20637"
            },
         }
                
...
    </script>

• Sie können die colors-Konfiguration übergeben:

  colors: {
      "branding": "#e00",
      "text": "#545454"
  },
  

• Sie können auch CSS-Variablen verwenden, die im Chat-Wrapper definiert sind (.oda-chat-wrapper):

  .oda-chat-wrapper {
      --color-branding: '#e00';
      --color-text: '#545454';
  }
  }

colors: {conversationBackground: 'no-repeat url("https://images.unsplash.com/photo-1582580470647-e3be5274d6a0?ixlib=rb-1.2.1&auto=format&fit=crop&w=668&q=80")'},

var settings = {
    URI: '<URI>',
    channelId: '<channel ID>',
    icons: {
        rating: '<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><path d="M15.994 3.006a5.7 5.7 0 00-3.795 1.707L12 4.916l-.199-.202a5.676 5.676 0 00-8.128 0c-2.231 2.275-2.231 5.953 0 8.228L12 21.428l8.326-8.486A5.873 5.873 0 0022 8.828a5.873 5.873 0 00-1.675-4.115A5.693 5.693 0 0016.262 3z"/></svg>'
    },

"i18n": {
    "fr": {
        "chatTitle": "Soutien"
    },
    "en-us": {
        "chatTitle": "Support"
    },
    "es": {
        "chatTitle": "Apoyo"
    },
    "zh-cn": {
        "chatTitle": "支持"
    }
}

• Visuelle Mediendateien (Bilder und Videos)
• Audio-Dateien
• Allgemeine Dateien wie Dokumente, PDFs und Kalkulationstabellen
• Speicherort

Beschreibung der Abbildung share-menu.png

Beschreibung der Abbildung eingeschränkten-options-share-menu.png

{
type: string,       // Space separated list of file formats, pass '*' to allow all supported file types

label: string,      // OPTIONAL, label for the share menu item, should preferably be configured through i18n strings

icon?: string,      // OPTIONAL, Icon image source path or SVG source string, the file icon is displayed as fallback

maxSize?: number    // OPTIONAL, Maximum file size allowed for upload in KiloBytes, the maximum and fallback value is 25 MB (25600 KB)
}

var settings = {
shareMenuItems: [ {
    type: 'pdf',
    label: 'Upload PDF',
}, {
    type: 'pdf'
}, {
    type: 'jpg png jpeg',
    icon: 'https://image-source-site/imageicon'
}, {
    type: 'doc docx xls',
    maxSize: 4096
}],
i18n: {
    en: {
        share_pdf: 'Upload PDF',
        share_jpg_png_jpeg: 'Upload Image',
        share_doc_docx_xls: 'Upload document'
    }
}
}

new WebSDK({
    URI: '<Server URI>',
    //...,
    icons: {
        rating: '<svg height="24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M15.994 3.006a5.7 5.7 0 00-3.795 1.707L12 4.916l-.199-.202a5.676 5.676 0 00-8.128 0c-2.231 2.275-2.231 5.953 0 8.228L12 21.428l8.326-8.486A5.873 5.873 0 0022 8.828a5.873 5.873 0 00-1.675-4.115A5.693 5.693 0 0016.262 3z"/></svg>'    // A heart icon
    }
})

new WebSDK({
    URI: '<Server URI>',
    //...,
    icons: {
        rating: '<svg height="24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M15.994 3.006a5.7 5.7 0 00-3.795 1.707L12 4.916l-.199-.202a5.676 5.676 0 00-8.128 0c-2.231 2.275-2.231 5.953 0 8.228L12 21.428l8.326-8.486A5.873 5.873 0 0022 8.828a5.873 5.873 0 00-1.675-4.115A5.693 5.693 0 0016.262 3z"/></svg>'    // A heart icon
    },
    colors: {
        ratingStar: '#ffebee',
        ratingStarFill: '#d32f2f'
    }
})

Bots = new WebSDK(chatWidgetSettings);

var isHandled = false;
var message = ;

Bots.on(WebSDK.EVENT.WIDGET_OPENED, function() {
    if (!isHandled && Bots.isConnected() && !Bots.getConversationHistory().messagesCount) {
        Bots.sendMessage(message, { hidden: true });
        isHandled = true;
    }
});

Bots.on(WebSDK.EVENT.NETWORK, function(state) {
    if (!isHandled && Bots.isConnected() && Bots.isChatOpened() && !Bots.getConversationHistory().messagesCount) {
        Bots.sendMessage(message, { hidden: true });
        isHandled = true;
    }
});

Bots.connect();

• Sie sind oft auf unnatürliche, generisch klingende Stimmen beschränkt, die Ihr Branding untergraben können.
• Das Gerät eines Benutzers unterstützt möglicherweise keine geschlechtsspezifischen Stimmen.
• Einige native Frameworks (darunter Cordova und ReactNative) erfordern Librarys von Drittanbietern für TTS-Services, da ihre Webviews die für das Web-SDK erforderlichen nativen Sprachsynthese-APIs nicht bereitstellen.

• Feature-Flag: enableBotAudioResponse: true (Standard ist false.)
• Standard-TTS-Service: WebSDK.TTS.oracle
• Featurekonfiguration: ttsVoice

var settings = {
    ...,
    enableBotAudioResponse: true,
    ttsVoice: [{
        lang: 'en-US',
        name: 'Samantha'
    }, {
        lang: 'en-US',
        name: 'Alex'
    }, {
        lang: 'en-UK'
    }]
}

• Die Eigenschaft pitch kann einen Wert zwischen 0 und 2 aufweisen.
• Die Eigenschaft rate kann einen Wert zwischen 0,1 und 10 aufweisen.
• Die Eigenschaft volume kann einen Wert zwischen 0 und 1 haben.

var settings = {
    // ....,
    ttsVoice: [{
        lang: 'en-us',
        name: 'Alex',
        pitch: 1.5,
        rate: 2,
        volume: 0.8
    }, {
        lang: 'en-us',
        name: 'Victoria',
        pitch: 1.2,
        rate: 1.7,
    }, {
        lang: 'en',
        name: 'Fiona',
        pitch: 2,
    }, {
        lang: 'en'
    }]
}

/**
 * Interface for the speech synthesis service; this can be used to define a service that can be
 * injected into the SDK to perform speech synthesis on behalf of the skill or assistant
 */
interface SpeechSynthesisService {
    /**
     * Adds a phrase to the utterance queue to be spoken
     * @param phrase string
     */
    speak(phrase: string): void;

    /**
     * Cancels any ongoing speech synthesis utterance
     */
    cancel(): void;

    /**
     * Returns a Promise that resolves into a list of SpeechSynthesisServiceVoice objects representing
     * the available voices
     *
     * @return {*}  {Promise<SpeechSynthesisServiceVoice[]>}
     */
    getVoices(): Promise<SpeechSynthesisServiceVoice[]>;

    /**
     * Sets the voice to be used for speaking the utterances. It accepts an array of candidate voices
     * sorted in their preference order, and sets one of them according to its matching criteria.
     * It returns a Promise that gets resolved when the voice is set.
     *
     * @param {SpeechSynthesisServiceVoice[]} voice
     * @return {*}  {Promise<void>}
     */
    setVoice(voices: SpeechSynthesisServiceVoice[]): Promise<void>;

    /**
     * Returns the voice that is used for speaking the utterances
     */
    getVoice(): SpeechSynthesisServiceVoice;
}

/**
 * Represents a voice that the SpeechSynthesisService supports. Every SpeechSynthesisServiceVoice has
 * its own relative speech service including information about language, name and optionally more.
 */
interface SpeechSynthesisServiceVoice {
    /**
     * Returns a BCP 47 language tag indicating the language of the voice
     */
    readonly lang: string;

    /**
     * Returns a human-readable name that represents the voice
     */
    readonly name: string;

    /**
     * Pitch of the voice, can range between 0 and 2, default is 1
     * Optional
     */
    pitch?: number;

    /**
     * Speed at which the utterance is spoken at, can range between 0.1 and 10, default is 1
     * Optional
     */
    rate?: number;

    /**
     * Volume at which the utterance is spoken at, can range between 0 and 1, default is 1
     * Optional
     */
    volume?: number;
}