Javascript

Prerequisites : package import from CDN (https://cdn.retorik.ai/)

  const defaultMenusConfig = {
    customMenu: [],
    subMenu: [
      { view: 1000, indice: 1 },
      { view: 1001, indice: 2 }
    ]
  }

  const defaultConfig = {
    isUsedOnBorne: false,
    position: {
      searchForLocation: true
    },
    locales: {
      default: 'fr-FR'
    },
    logo: {
      src: 'images/logo_DAVI.png'
    },
    skipWelcome: false,
    preventExpectedInputHint: false,
    hideRetorikLogo: true,
    enableConversationCookie: false,
    enableTelemetry: false,
    ...defaultMenusConfig
  }

  const defaultViewsConfiguration = {
    homeRoute: 'home',
    webcamRotation: 90,
    views: {
      home: {
        background: {
          image: 'images/background.webp',
          style: 'image'
        }
      },
      news: {
        intervalInSeconds: 2,
        loop: true,
        openingVideo: 'videos/intro.mp4',
        background: {
          style: 'image',
          image: 'images/background.webp'
        }
      }
    }
  }

  const defaultChatbotData = {
    size: '200vh',
    height: undefined
  }

  const ponyfillFactoryCredentials = {
    region: '<region>',
    subscriptionKey: '<subscription_key>'
  }

  const colors = {
    theme: 'dark',
    primary: '#165A79',
    secondary: '#165A79',
    loader: {
      animation: '#00BDFF',
      background: 'rgba(18,18,18,0.9)',
      text: '#FFF',
      toggle: {
        text: '#FFF',
        background: '#165A79'
      },
      button: {
        background: {
          default: '#FFF',
          hover: '#165A79'
        },
        border: {
          default: '#165A79',
          hover: '#FFF'
        },
        text: {
          default: '#165A79',
          hover: '#FFF'
        }
      }
    },
    card: {
      frame: {
        background: 'rgba(255, 255, 255, 0.9)',
        border: '#165A79',
        text: '#165A79'
      },
      button: {
        background: {
          default: 'transparent',
          hover: '#165A79'
        },
        border: {
          default: '#165A79',
          hover: '#165A79'
        },
        text: {
          default: '#165A79',
          hover: '#FFF'
        }
      },
      discoverButton: {
        background: {
          default: '#eaebf0',
          hover: 'transparent'
        },
        border: {
          default: 'transparent',
          hover: '#FFF'
        },
        text: {
          default: '#575F6B',
          hover: '#FFF'
        }
      }
    },
    textMode: {
      panel: {
        background: 'transparent',
        border: 'transparent',
        conversationUser: 'rgba(0, 0, 0, 0.9)',
        conversationBot: '#165A79'
      }
    },
    vocalMode: {
      subtitles: {
        text: '#FFF',
        background: '#165A79'
      }
    },
    formInput: {
      text: {
        default: '#165A79',
        hover: '#000'
      },
      inputRadioCheckbox: {
        unchecked: {
          background: '#FFF',
          border: '#165A79'
        },
        checked: {
          background: '#FFF',
          border: '#165A79',
          item: '#165A79'
        }
      },
      inputButton: {
        background: {
          default: '#FFF',
          hover: '#165A79'
        },
        border: {
          default: '#165A79',
          hover: '#165A79'
        },
        text: {
          default: '#165A79',
          hover: '#FFF'
        }
      },
      likert: {
        default: '#A0A0A0',
        hover: '#165A79'
      }
    }
  }

  const props = {
    config: defaultConfig,
    viewsConfig: defaultViewsConfiguration,
    chatbotData: defaultChatbotData,
    agentData: 'https://cdn.retorik.ai/spiritenginehtml5/characters/zahra',
    addressData: {
      tenant: '<mon_tenant>'
    }
    ponyfillFactoryCredentials: ponyfillFactoryCredentials,
    customVoice: {
      voice: 'JennyMultilingualNeural'
    },
    defaultMode: 2,
    colors: colors,
    skipLoader: false,
    widgetConfig: {} // uniquement lors de l'utilisation en mode widget
  }

  // Wait for DOM loading before inserting element
  document.addEventListener("DOMContentLoaded", function (event) {
    const element = document.querySelector('#my-retorik-agent')
    // Normal mode render (mobile / desktop / borne)
    window.Retorik.renderAgent(props, element)
    // Widget mode render
    window.Retorik.renderWidget(props, element)
  });