Code Monkey home page Code Monkey logo

fomo-btn-test's Introduction

FOMO Button

Steps for adding a new client

  1. Copy and rename the template/ folder
  2. Update the reviews in reviews.js file for new client. (zip, lat, long, name, text, city). Can get lat/long from zip from a site like this one.
  3. Update the button color in styles.css in the new client folder as desired
#reviews-tigger-btn,
#ureka-cta {
  background-color: #f15645;
  /* ... */
}
  1. Find & comment/uncomment the following line of code in index.js to remove/add CTA button to popup.
modal_footer.innerHTML = modal_footer.innerHTML + ctaBtn;

Change the CTA text and link.

const ctaBtn =
  '<a id="ureka-cta" type="button" style="text-decoration:none;" class="btn btn-primary m-auto" href="https://lunchbreak4kids.com/meal-plans/">GetStarted</a>';
  1. Find and remove all the logs (console.log) from index.js in the client folder.

  2. Get the plugin code to embed for new client by substituting value for client_folder_name in the following template at all appropriate places. This will work after code is in master branch.

<!-- Eureka reiviews plugin -->
<!-- Paste this code at the place you want the button to appear -->
<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
  integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g=="
  crossorigin="anonymous"
  referrerpolicy="no-referrer"
/>
<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/fontawesome.min.css"
  integrity="sha512-xX2rYBFJSj86W54Fyv1de80DWBq7zYLn2z0I9bIhQG+rxIF6XVJUpdGnsNHWRa6AvP89vtFupEPDP8eZAtu9qA=="
  crossorigin="anonymous"
  referrerpolicy="no-referrer"
/>

<link
  href="https://fomobutton.netlify.app/{client_folder_name}/styles.css"
  rel="stylesheet"
/>

<div class="center">
  <button
    id="reviews-tigger-btn"
    type="button"
    class="btn btn-primary"
    data-toggle="modal"
    data-target="#ureka-modal"
    data-site-id="{client_folder_name}"
  >
    Read Reviews from your nighbors
  </button>
</div>

<script
  src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
  integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
  crossorigin="anonymous"
></script>
<script
  src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
  integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
  crossorigin="anonymous"
></script>
<script
  src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
  integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
  crossorigin="anonymous"
></script>

<script src="https://fomobutton.netlify.app/{client_folder_name}/reviews.js"></script>
<script src="https://fomobutton.netlify.app/{client_folder_name}/index.js"></script>

<!-- Eureka reiviews plugin -->
<!-- --------- END --------- -->

fomo-btn-test's People

Contributors

strongsoda avatar wulsin avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.