"No-code" product tours for Streamlit apps - embedding javascript to active tour on deployed app

Custom Components
1

Hi all,

I have created a so-called “no-code” product tour on Usetiful which involves:

  1. Building my app in Streamlit
  2. Deploying it (in my case on Render)
  3. Building the product tour in Usetiful on my app by selecting various app components and designing triggers
  4. “Publishing” the Usetiful tour i.e. making it live for my app

To make the product tour run for a user, I have to embed Usetiful javascript into my Streamlit code. The Usetiful code looks like this:

<!-- Usetiful script start -->
            <script>
(function (w, d, s) {
    var a = d.getElementsByTagName('head')[0];
    var r = d.createElement('script');
    r.async = 1;
    r.src = s;
    r.setAttribute('id', 'usetifulScript');
    r.dataset.token = "XXXXXXXXXXX";
                        a.appendChild(r);
  })(window, document, "https://www.usetiful.com/dist/usetiful.js");</script>

<!-- Usetiful script end -->

My implementation of it in Streamlit looks like this:

import streamlit.components.v1 as components

usetiful_js = """
(function (w, d, s) {
    var a = d.getElementsByTagName('head')[0];
    var r = d.createElement('script');
    r.async = 1;
    r.src = s;
    r.setAttribute('id', 'usetifulScript');
    r.dataset.token = "XXXXXXXXXXX";
                        a.appendChild(r);
  })(window, document, "https://www.usetiful.com/dist/usetiful.js");
"""

usetiful_html = f"<script>{usetiful_js}</script>"
components.html(usetiful_html)

Suffice to say, I’m posting here because when I run my app, the product tour doesn’t work. That is, nothing gets rendered on screen.

Is it because the Streamlit implementation “buries”/ “hides” the Usetiful javascript in an i-frame which means Usetiful misses it?

Anyway, if anyone can help me correctly implement it, I would greatly appreciate it!

2

Try streamlit-javascript.

3

Thanks @Goyo sorry for the late reply. I will have a look at that

4

Hi @Goyo I implemented streamlit-javascript but couldn’t make it work. Sorry for the late reply and thanks for your suggestion.

5

An update on this:

Instead of using streamlit-javascript I use streamlit.components.v1 and embed the Usetiful code in my python script as follows:

script = """
<!-- Usetiful script start -->
<script>
console.log('Usetiful script is loading...'); // Console log statement
(function (w, d, s) {
    var a = d.getElementsByTagName('head')[0];
    var r = d.createElement('script');
    r.async = 1;
    r.src = s;
    r.setAttribute('id', 'usetifulScript');
    r.dataset.token = "XXXXX";
    a.appendChild(r);
})(window, document, "https://www.usetiful.com/dist/usetiful.js");
</script>
<!-- Usetiful script end -->
"""
components.html(script,width=200, height=200)

When I deploy this code (using Render) and open the browser developer tools (F12), the console logs show

Usetiful script is loading...

which means my javascript is being executed. So that’s progress at least.

However, when I go on to my app website, the product tour is not working.

Does anyone know if Streamlit might be blocking these third party java scripts from running on the page? I thought that’s what components is trying to do.

6

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.