• セキュアな接続
• 楕円形のアクション・ボタン
• スキル・レスポンスのオーディオ・ナレーション。
• アタッチメントの共有
• 以前の(フォーカス外)メッセージのクリックの無効化
• ユーザー入力のオートコンプリート

    <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
};

• スキルによって開始される会話を再現します。
• スクロールするか固定されている(スティッキーな)チャット・ウィンドウの上部と下部にコンテンツを埋め込みます。
• ロケールを設定します。
• デバッグ・モードを設定します。
• 音声合成用のロケールと音声を設定します。

<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. settings.jsで、var chatWidgetSettings宣言でbeforeDisplayコールバック関数を使用してdelegateオブジェクトを定義します。

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

   メッセージのタイプがtextの場合、beforeDisplayはカスタムのsplitParagraph関数をコールして、テキストを最初の段落で分割します。
2. カスタムのsplitParagraphおよびtoggleParagraphビュー関数の変数を宣言します。

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

3. splitParagraph関数式およびtoggleParagraphView関数を追加します。
   splitParagraphは、globalIDCounter変数を分離してsplitParagraph関数によってのみアクセスできるようにするIFE (即時起動関数式)です。コードは段落("\n\n")を識別し、それに応じてテキストを分割します。次に、表示するテキストが多いことを示す3つのドット(...)と、残りのテキストを非表示にするための「続きを読む」ボタンが追加されます。
   

   
   図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. 「詳細表示」ボタンと「詳細表示」ボタンの構成とスタイル設定(オプション)。CSSには、長いテキスト表示の状態に応じてボタンを表示または非表示にするdisplay:noneスタイルが含まれています。
   • ボタンをスタイル設定しない場合は、次のコードを追加します。

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

   • ボタンをスタイル設定する場合は、次のような操作を実行できます。

     <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>

• Webページ内でのウィジェットの位置を設定します。
• チャット・ウィジェットのディメンション、色およびフォント・スタイルを設定します。
• ウィジェット内のメッセージのパディングを設定します。
• ボット・ボタンに対する通知バッジ・アイコンの位置を設定します。
• ウィジェット内の会話の開始位置を設定します。

     <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>

• colors構成を渡すことができます:

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

• または、チャット・ラッパー(.oda-chat-wrapper)で定義されたCSS変数を使用できます。

  .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": "支持"
    }
}

• ビジュアル・メディア・ファイル(イメージおよびビデオ)
• オーディオ・ファイル
• ドキュメント、PDF、スプレッドシートなどの一般ファイル
• ロケーション

図share-menu.pngの説明

図restricted-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();

• 多くの場合、ブランディングを損なう可能性のある、不自然で一般的な音声に限定されます。
• ユーザーのデバイスは、性別固有の音声をサポートしていない可能性があります。
• 一部のネイティブ・フレームワーク(CordovaおよびReactNative)では、WebビューではWeb SDKで必要なネイティブ音声合成APIが公開されないため、TTSサービス用のサードパーティ・ライブラリが必要です。

• 機能フラグ: enableBotAudioResponse: true (デフォルトはfalse)
• デフォルトのTTSサービス: WebSDK.TTS.oracle
• 機能構成: ttsVoice

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

• pitchプロパティには、0から2までの値を指定できます。
• rateプロパティには、0.1から10までの値を指定できます。
• volumeプロパティには、0から1までの値を指定できます。

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;
}