Insalled Custom app Correctly - however, my snippet is not showing up on store.

New Member
2 0 0

Hi there.

First time building a custom app, and essentially I built a really simple app for SMS subscribers using the Attentive API- It is a simple form that makes a post request to that API- I tested this on the fronted (before I built an APP) and it was working. However, I was told I'd need to setup my own server/middleware which I did following the Shopify Tutorial using ngrok, Shopify Koa to authenticate the app. I managed to create the app on my partner account, and install it on our website succesfully (FINALLY! took forever to figure this out). Now- I wanted to embed this in a div, and have my form appear on the Front end which it didn't, and I'm stuck again hoping that some here can help. I've attached my code in my project file here and masked my API key since I do NOT want this public. Lastly, If I want to make changes to my app how would I do that so that it can update in real time ?




var div = document.getElementById('AttApp');
      div.innerHTML += '<form id="attentive_form" action="" method="POST"><label>Phone Number</label><input id="phone__input" type="phone"  name="phone" value="phone" placeholder="phone" /><button type="submit" class="small" >Phone</button></form>'
    document.getElementById('attentive_form').addEventListener('submit', function(event){
    var phone = document.getElementById("phone__input").value;
      var attentiveVisitorId = document.cookie.replace(/(?:(?:^|.*;\s*)__attentive_id\s*=\s*([^;]*).*$)|^.*$/, "$1");

      var headers = {
        'Authorization': 'API KEY',
        'Content-Type': 'application/json'

      fetch('', {
        method: 'POST', 

      headers: headers,
      body: JSON.stringify({"phone": phone , "visitorId": attentiveVisitorId }),
      .then(response => response.json())
        .then(data => {
      console.log('Success:', data);
      .catch((error) => {
    console.error('Error:', error); })