Get js file 404 (NOT FOUND) when render templates in Sheets


#1

When I want to render the html template to intercom sheets, the html file can’t read the js file in my repo.
However, I open the html directly, it open successfully.
So it only failed when I open it in intercom, does anyone has any idea?

I use flask framework, and the structure of my app is

app.py
–js
|–photo.js
–templates
|–photo.html

I link the js file in html by <script src="…/js/photo.js">

It shows “GET https://0298f211.ngrok.io/js/photo.js 404 (NOT FOUND)” error


#2

Hey @Brady :wave:

Sounds like you’ve not setup the route properly - could you send along any example gists of the code/any repos you’re working with? Feel free to DM that info if you’d prefer it not be public :slightly_smiling_face:


#3

Hi @zach,
This is my snippet, and the structure is showed in the question.

<!DOCTYPE html>
<html>

    <head>
        <title>Welcome to Glitch!</title>
    </head>

    <body>
        <h1>
            This is a short Terms of Service for your coupon.
        </h1>
        <p>
            You can apply coupon using Messenger card after closing this view or by <span id="apply-coupon"><u>clicking here</u></span>
        </p>
        <div class="booth">
            <canvas id="canvas" width="300" height="225"></canvas>
            <img id="photo" src="http://placekitten.com/400/300" alt="Photo of you">
            <video id="video" width="300" height="225"></video>
            <a href="#" id="capture" class="booth-capture-button">Take photo</a>
        </div>
        <script src="https://js.intercomcdn.com/messenger-sheet-library.latest.js "></script>
        <script>
            INTERCOM_MESSENGER_SHEET_LIBRARY.setTitle('Apply coupon');
            document.getElementById("apply-coupon").addEventListener("click", function () {
                INTERCOM_MESSENGER_SHEET_LIBRARY.submitSheet();
            });
        </script>
        <script type="text/javascript" src="../js/photo.js"></script>
    </body>

</html>

#4

From what I understand of Flask (and I’m no expert), the best way to achieve this is to keep your Javascript (and CSS) files within the static repository, whereby you can separate content types into their own directories. Take a look here for recommended structures.

You then serve the file by using this in your HTML:

<script src="{{ url_for('static', filename='js/script.js') }}"></script>

Mind giving this a try?