• Conexiones seguras
• Botones de acción con forma de píldora
• Narración de audio de las respuestas a las aptitudes.
• Compartir anexos
• Desactivar clics en mensajes anteriores (sin enfoque)
• Terminación automática de la entrada de usuario

    <script>
        const chatSettings = {
            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>

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

• Imitar una conversación iniciada por la aptitud.
• Integre contenido en la parte superior e inferior de la ventana de chat que se desplaza o que no se mueve (fijada).
• Definir la configuración regional.
• Definir el modo de depuración
• Defina la configuración regional y la voz para la síntesis de voz.

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

const chatSettings = {
    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. En settings.js, defina un objeto delegate con una función de devolución de llamada beforeDisplay en la declaración const chatSettings:

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

   Si el mensaje es de tipo text, beforeDisplay llama a la función splitParagraph personalizada para dividir el texto por el primer párrafo.
2. Declare las variables para las funciones de vista personalizadas splitParagraph y toggleParagraph:

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

3. Agregue la expresión de la función splitParagraph y la función toggleParagraphView.
   splitParagraph es un IIFE (expresión de función invocada inmediatamente) que aísla la variable globalIDCounter para que solo la función splitParagraph pueda acceder a ella. El código identifica un párrafo ("\n\n") y divide el texto en consecuencia. A continuación, agrega tres puntos (...) para indicar que hay más texto que mostrar y un botón Leer más para mostrar el texto restante.
   

   
   Descripción de la ilustración 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. Configure y (opcionalmente) aplique estilo a los botones Leer más y Leer menos. CSS incluye un estilo display:none para mostrar u ocultar botones según el estado de la visualización de texto largo.
   • Si no desea aplicar estilo a los botones, agregue el siguiente código:

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

   • Si quieres darle estilo a los botones, puedes hacer algo como esto:

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

• Definir la posición del widget en la página web.
• Definir las dimensiones, los colores y el estilo de fuente del widget de chat.
• Definir el relleno de los mensajes en el widget.
• Definir la posición del icono de insignia de notificación con respecto al botón de bot.
• Definir la posición inicial de la conversación en el widget.

     <script>
        const chatSettings = {
            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>

• Puede transferir la configuración colors:

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

• O puede utilizar variables CSS definidas en el envoltorio de chat (.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")'},

const settings = {
    // ...,
    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": "支持"
    }
}

<script>
const chatSettings = {
    URI: '<Chat server URI>',
    channelId: '<Channel ID>',
    userId: '<User ID>',
    fontFamily: '"Helvetica Neue", Helvetica, Arial, sans-serif',
    locale: 'en',
    enableClearMessage: true,
    icons: {
        launch: 'style/Robot.png',
        avatarBot: 'style/Robot.png',
        avatarUser: 'style/userIcon.png'
    }
};

function initSDK(name) {
    // If WebSDK is not available, reattempt later
    if (!document || !WebSDK) {
        setTimeout(function() {
            initSDK(name);
        }, 2000);
        return;
    }

    // Default name is Bots
    if (!name) {
        name = 'Bots';
    }

• archivos de medios visuales (imágenes y vídeos)
• archivos de audio
• archivos generales, como documentos, archivos PDF y hojas de cálculo
• Ubicación

Descripción de la ilustración share-menu.png

Descripción de la ilustración restringido-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)
}

const settings = {
    shareMenuItems: [ {
        type: 'odf',
        label: 'Upload ODF',
    }, {
        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(chatSettings);

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

• A menudo estás limitado a voces antinaturales que suenan genéricas que pueden socavar tu marca.
• Es posible que el dispositivo de un usuario no admita voces específicas de género.
• Algunos marcos nativos (Cordova y ReactNative entre ellos) requieren bibliotecas de terceros para los servicios TTS porque sus vistas web no exponen las API nativas de síntesis de voz que requiere el SDK web.

• Indicador de función: enableBotAudioResponse: true (el valor por defecto es false).
• Servicio TTS predeterminado: WebSDK.TTS.oracle
• Configuración de función: ttsVoice

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

• La propiedad pitch puede tener un valor entre 0 y 2.
• La propiedad rate puede tener un valor entre 0,1 y 10.
• La propiedad volume puede tener un valor entre 0 y 1.

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

    /**
     * Adds listener to SpeechSynthesisServiceEvent
     *
     * @param {SpeechSynthesisServiceEvent} event
     * @param {Function} listener
     */
    on(event: SpeechSynthesisServiceEvent, listener: () => void): void;

    /**
     * Removes listener(s) to SpeechSynthesisServiceEvent
     *
     * @param {SpeechSynthesisServiceEvent} event
     * @param {Function} listener
     */
    off(event: SpeechSynthesisServiceEvent, listener?: () => void): void;
}

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

const SpeechSynthesisServiceEvent = {
    TTSPlay: 'tts:play',
    TTSEnd: 'tts:end'
}