🏉

Installation

Step 1: Finding Your Shopify Template Code

You can find the code for your Shopify store by clicking 'Online Store' and then 'Themes' in the nav bar and going to 'Actions' in the 'Current Theme' section and click 'Edit Code' in the dropdown. This is illustrated below.

image

Step 2: Choosing a Home for your Widget

You can put the drop-in stationery editor wherever you like on your store. Once you've chosen, you need to find the appropriate file to drop code into. This should be where the rest of the code is for that file.

We've chosen the basket as a nice place for people to write a gift note We'll carry on the documentation assuming you've chosen the same. You can find the basket code under the 'Sections' folder in the 'cart-template.liquid' file.

Step 3: Adding the Generated Widget Code

Copy and paste the widget script you generated at the end of

into the bottom of the cart page's div containing the body.

image

Step 4: Placing the Widget

  1. Insert <div id="scribeless-widget" ></div> in you cart page at the desired location
  2. We've prepared some surrounding code to style the editor so it only appears when the customer clicks to expand a message.
  3. <div id="scribelessSnackbar">Billing is not enabled. Please add your payment details on the platform</div>
    <button type="button" class="collapsible"><h5>Add a Gift Note</h5></button>
                <div class="content text-left">
                            <div id="scribeless-widget" ></div>
                  <div class="text-right">
                       <button class="cart__submit btn btn--small-wide"  onclick="attachCampaignResponse(); return false"> Generate Note </button>
                  </div> 
                  <div class="text-center">
                    <h5 id="generating-card-status-completed" > Note Generated </h5>
                        <h5 id="generating-card-status-loading" > Generating Note ... </h5>
                   </div>
                  <hr/>
                </div>
    image

  4. If you have prepared surrounding code like we had and want to style it with CSS, you can drop that in the same file in a style tag below the script tag as below
  5. <style>
    .collapsible {
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    margin-bottom:20px;
    }
    
    .active, .collapsible:hover {
    }
    .content {
      margin-top: 20px;
      display: none;
      overflow: hidden;
    /* Uncomment and use the transforms below in order the inc or dec the size of the widget container. The more you move from 1 -> 0, the smaller the container and its content becomes */
    /*   transform: scale(0.8)
      -moz-transform: scale(0.8); */
    }
    
    #generating-card-status-loading {
      visibility:hidden;
    }
    
    #generating-card-status-loading.show {
      visibility: visible;
    }
    
    #generating-card-status-completed {
      visibility:hidden;
    }
    
    #generating-card-status-completed.show {
      visibility: visible;
    } 
    
    #scribelessSnackbar {
      visibility: hidden;
      min-width: 250px;
      margin-left: -125px;
      background-color: #333;
      color: #fff;
      text-align: center;
      border-radius: 2px;
      padding: 16px;
      position: fixed;
      z-index: 1;
      left: 40%;
      bottom: 150px;
      font-size: 17px;
    }
    
    #scribelessSnackbar.show {
      visibility: visible;
      -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
      animation: fadein 0.5s, fadeout 0.5s 2.5s;
    }
    
    @-webkit-keyframes fadein {
      from {bottom: 0; opacity: 0;} 
      to {bottom: 150px; opacity: 1;}
    }
    
    @keyframes fadein {
      from {bottom: 0; opacity: 0;}
      to {bottom: 150px; opacity: 1;}
    }
    
    @-webkit-keyframes fadeout {
      from {bottom: 150px; opacity: 1;} 
      to {bottom: 0; opacity: 0;}
    }
    
    @keyframes fadeout {
      from {bottom: 150px; opacity: 1;}
      to {bottom: 0; opacity: 0;}
    } 
    </style>
    image

Step 5: Add Code to Hide Some Details

Due to the way we store data that is to be sent off to Scribeless, we need to hide data from the customer. Do this by following these steps.

  1. Find where the properties are rendered. This will be denoted by {%- for p in properties -%}
  2. Insert {% assign first_character_in_key = p.first | truncate: 1, '' %} at the top of the for loop
  3. If {%- unless p.last == blank -%} exists in the for loop, then replace it with {%- unless p.last == blank or first_character_in_key == '_' -%}
  4. If {%- unless p.last == blank -%} does not exist in the for loop, then add {%- unless p.last == blank or first_character_in_key == '_' -%} underneath what you inserted in part 2 of this step. Be sure to close the unless loop with {%- endunless -%} just above the closure of the for loop, {%- endfor -%}
image

Step 6: Add the Generate Note Code

This step sends off the design of the note to Scribeless as well as helping with the display of the expending widget.

  1. Add the following code below the div containing the body of the HTML. The attachCampaignResponse function is important in sending off the note and adding the product to the basket. The other functions help with aesthetics of the expanding widget and its generate note button
  2. <script>
      async function  attachCampaignResponse() {
        generateCardLoader('loading');
        let resp = await scribelessCreateCampaign();
    
    if(resp.success == false && resp.error_code =='error/payment-method-required' ) {
       		var x = document.getElementById("scribelessSnackbar");
      		x.className = "show";
      		setTimeout(function(){ x.className = x.className.replace("show", ""); }, 5000);
        }    
        
        if(resp && resp.success== true) {
          generateCardLoader('completed');
          
          
          let body = {
            quantity: 1,
            id: YOUR_GIFTCARD_VARIANT_ID,	
             properties: {
               _scribeless_information: resp
          }
          };
            
          let gift_card_addition_response = await fetch(`/cart/add.js`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json;charset=utf-8'
              },
            body: JSON.stringify(body)
        });
          let data = await gift_card_addition_response.json();
    	window.location.reload();
        }    
      }
    
    function generateCardLoader(status) {
      if(status == 'loading') {
      	  let x = document.getElementById("generating-card-status-loading");
      x.className = "show";
      let y = document.getElementById("generating-card-status-completed");
      y.className = "hide";
      }
      if(status == 'completed'){ 
      let x = document.getElementById("generating-card-status-completed");
      x.className = "show";
      let y = document.getElementById("generating-card-status-loading");
      y.className = "hide";
      }
    }
    var coll = document.getElementsByClassName("collapsible");
    var i;
    for (i = 0; i < coll.length; i++) {
      coll[i].addEventListener("click", function() {
        this.classList.toggle("active");
        var content = this.nextElementSibling;
        if (content.style.display === "block") {
          content.style.display = "none";
        } else {
          content.style.display = "block";
        }
      });
    }
    </script>
    image

  3. Replace YOUR_GIFTCARD_VARIANT_ID with the variant id you obtained in
    🎈
    Preparation

You're done with this stage of the setup! After this, it's good to run through and make sure everything works. You can see how to do this on the

page.