動的HTMLを他のHTMLへ埋め込む方法

現在Pythonを使ってチャットボットの開発をしています。
よくある右下にボタンがあり、押すとニョロっとチャット画面が出てくる感じにしたいと思ってます。

BotUIを使ってチャットボット機能を実装する予定で、それっぽい画面を表示することは出来ました。
ただ、ただ次の画面に遷移した時にや前の画面に遷移した時に今までのやり取りが消えて全て最初からやり直しになってしまいます。
BotUIで生成されたHTMLをそのまま次画面に持ち込む方法は可能でしょうか？

チャットボットのHTMLになります。

html
1    <div id="slide">
2        <div id="slide-in">
3            <div id="open-btn"><img src="img/open-btn.gif" width="20" height="20" /></div>
4            <h7>開くかも</h7>
5            <div id="slide-contents">
6                <div class="botui-app-container" id="self-intro">
7                    <bot-ui></bot-ui>
8                </div>
9            </div>
10        </div>
11    </div>
12    <link rel="stylesheet" type="text/css" href="{{url_for('static', filename='css/botui-theme-default.css')}}">
13    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
14    <script src="https://cdn.jsdelivr.net/vue/latest/vue.min.js"></script>
15    <script src="{{url_for('static', filename='js/botui.min.js')}}"></script>
16    <script src="{{url_for('static', filename='js/chat.js')}}"></script>
17

これをtemplate extendsを使って表示したいHTMLに埋め込んでます。
この方法で何とか次画面にもチャットエリアの表示をすることは出来たのですが、この場合だと<bot-ui>タグ内が毎回新規作成されてしまうので仕様を満たさないです。

JavaScript
1(function() {
2  var botui = new BotUI('self-intro');
3
4  //初期メッセージ．
5  botui.message.add({
6    content: 'こんにちは！'
7  }).then(Questions);
8
9  function Questions() {
10    botui.message.add({
11      cssClass:'custom-class',
12      delay:1500,
13      content: '何について，お話ししましょうか？'
14    }).then(function() {
15      return botui.action.button({
16        autoHide: false,
17        delay: 1500,
18        action: [
19          {icon: 'user-o', text: '来歴', value: 'carrier'},
20          {icon: 'rocket', text: '趣味', value: 'hobby'},
21          {icon: 'pencil', text: 'サイト', value: 'memotaro'}]
22      });
23    }).then(function(res) {
24      botui.action.hide();
25      switch (res.value) {
26        case 'carrier': showCarrier(); break;
27        case 'hobby': showHobby(); break;
28        case 'memotaro': showMemotaro(); break;
29        default: end();
30      }
31    });
32  }
33});