Не могу интегрировать Amazon lex на свой сайт - PullRequest
Новая
       3

Не могу интегрировать Amazon lex на свой сайт

1 голос
/ 13 июля 2020

Я разработал чат-бота aws lex. Теперь я хочу интегрировать на своем веб-сайте экземпляр EC2, используя предварительно созданные библиотеки компонентов пользовательского интерфейса в качестве встраиваемого iframe, который уже доступен в github. Это ссылка на него: https://github.com/aws-samples/aws-lex-web-ui#iframe. Ниже приведен код для iframe из github: 

<html>
  <head>
    <title>My Parent Page</title>
  </head>
  <body>
    <h1>Welcome to my parent page</h1>
    <!-- loader script -->
    <script src="./lex-web-ui-loader.js"></script>
    <script>
      /*
        The loader library creates a global object named ChatBotUiLoader
        It includes the IframeLoader constructor
        An instance of IframeLoader has the load function which kicks off
        the load process
      */

      // options for the loader constructor
      var loaderOptions = {
        // you can put the chatbot UI config in a JSON file
        configUrl: './chatbot-ui-loader-config.json',

        // the full page chatbot UI that will be iframed
        iframeSrcPath: './chatbot-index.html#/?lexWebUiEmbed=true'
      };

      // The following statement instantiates the IframeLoader
      var iframeLoader = new ChatBotUiLoader.IframeLoader(loaderOptions);

      // chatbot UI config
      // The loader can also obtain these values from other sources such
      // as a JSON file or events. The configUrl variable in the
      // loaderOptions above can be used to put these config values in a file
      // instead of explicitly passing it as an argument.
      var chatbotUiConfig = {
        ui: {
          // origin of the parent site where you are including the chatbot UI
          // set to window.location.origin since hosting on same site
          parentOrigin: window.location.origin,
        },
        iframe: {
          // origin hosting the HTML file that will be embedded in the iframe
          // set to window.location.origin since hosting on same site
          iframeOrigin: window.location.origin,
        },
        cognito: {
          // Your Cognito Pool Id - this is required to provide AWS credentials
          poolId: xxx
        },
        lex: {
          // Lex Bot Name in your account
          botName: yyy
        }
      };

      // Call the load function which returns a promise that is resolved
      // once the component is loaded or is rejected if there is an error
      iframeLoader.load(chatbotUiConfig)
        .then(function () {
          console.log('iframe loaded');
        })
        .catch(function (err) {
          console.error(err);
        });
    </script>
  </body>
</html>

Когда я интегрировал этот код и разместил свой веб-сайт, я мог просто увидеть «Добро пожаловать на мою родительскую страницу. ". Я не могу видеть здесь свои компоненты lex. Я поместил свой index. html и папку lex-web-ui в тот же каталог, что и два отдельных файла. Должен ли я изменить местоположение моего скрипта sr c? Я не конечно, где я ошибаюсь

Пример: 

cd /var/www/html    
ls
index.html lex-web-ui(github folder)

1 Ответ

1 голос
/ 14 июля 2020

Проблема в том, что этот встроенный javascript (в вашем html файле) требует, чтобы файл загрузчика. js запускал некоторые функции, которые он вызывает. 

<!-- loader script -->
<script src="./lex-web-ui-loader.js"></script>

Эта строка справа здесь сообщается файлу html, где найти этот файл загрузчика javascript. ./ перед именем файла означает, что файл должен находиться в той же родительской папке, что и этот html файл.

Итак, у вас есть пара вариантов, оба очень простые: Либо (1) измените код так, чтобы он указывал на папку, в которой фактически находится файл загрузчика js. или (2) переместите файл html в ту же родительскую папку, что и файл загрузчика js.

Для первого варианта просто измените ./ на ./lex-web-ui/

<!-- loader script -->
<script src="./lex-web-ui/lex-web-ui-loader.js"></script>

Для второго варианта вы можете перемещать файлы и папки, как хотите, просто убедитесь, что файл. html находится в той же папке, что и файл загрузчика. js. Таким образом, вам не нужно менять код. 

[www]
  |
  |--[html]
       |
       |--[lex-web-ui]
              |
              |--lex-web-ui-loader.js
              |--index.html
              |--(other lex-web-ui files)

Примечание: используйте одно ИЛИ другое, но не то и другое.

...