@brian-dausman/aog-widget

AoG Widget Documentation

Quick Start

1. Add the script to your HTML:

<script src="https://www.nerdswithcharisma.com/aog/nwc-aog.js"></script>

2. Initialize with your project ID:

window.AoGWidget.init({
  projectId: "your-project-id",
});

That's it! You'll now have a feedback button with all the defaults on your page. You can access the dashboard at NWC's AoG login page

---

Configuration

Basic Config

OOtB you can turn off screenshots if you want to using the disableScreenshot property. You can also set the theme to light or dark, but don't worry, you can customize farther later on.

window.AoGWidget.init({
  projectId: "your-project-id",
  disableScreenshot: false, // Set to true to disable screenshot capture
  theme: {
    mode: "light", // or "dark"
  },
});

Animations

The default animation is a subtle fade/scale animation, but if you want to do something crazy, go right ahead and modify the easing prop. You can control how long the animation takes with the duration property too.

animation: {
  duration: 5000, // milliseconds
  easing: "cubic-bezier(0.4, 1.56, 0.7, 1)"
}

Feedback Button

You can customize the look and feel of the button as well (this is the docked button that triggers the modal, incase that wasn't obious).

All are pretty self-explanitory except, element. What's this, you ask?! If you want a custom button to trigger the feedback, you'd use that, making all the other values pretty much useless but hey, control!

button: {
  color: "rgb(255, 0, 92)", // Background color, hex or rgba
  textColor: "#ffffff", // Text color
  position: "bottom-right", // top-left, top-right, bottom-left, bottom-right
  text: "WHAT?!", // Button text
  - or -
  element: document.querySelector("#custom-button") // Use custom element as trigger
}

Modal

You can customize the look of the modal itself once it's open.

modal: {
  title: "I'm A Modal Title!!!!",   // the heading at the top of the modal
  tagline: "We'd love to hear from you, unless it's bad news, then keep it to yourself.", // the taline below the heading
  customStyles: "background-color: rgb(255, 0, 92) !important;", // any custom styles applied to the modal itself
}

Ratings

Inside the modal you can change the rating schema. Change the color, the label title, the value sent back or to the db, and the icon

ratings: [
  {
    color: "#ff4444",
    title: "Poor",
    icon: "fa fa-frown", // :: todo
    value: 1,
  },
  {
    color: "#00c851",
    title: "Excellent",
    icon: "fa fa-smile",
    value: 5,
  },
];

Inputs

Style the inputs how you'd like as well.

inputs: {
  email: {
    label: "Give us your email",
    customStyles: "border: 2px solid rgb(255, 0, 92);"
  },
  message: {
    label: "Feed us feedback!",
    customStyles: "border: 2px solid rgb(255, 0, 92);"
  }
}

Modal Buttons

Style or change the content of the submit or cancel button inside the modal.

submit: {
  text: "GOOOOOOO!",
  customStyles: "background-color: rgb(255, 0, 92); color: #ffffff; padding: 2px 10px; border-radius: 4px;"
}
cancel: {
  text: "Back up",
  customStyles:
    "background-color: #fff; border: 1px solid #d7d7d7; color: #000000; padding: 5px 10px; border-radius: 6px;",
},

Toast Messages

When the submit event happens, we will throw a success or error scenario, which you can customize the messaging (you can use css to customize the styles in your own css file if you'd like).

messages: {
  success: "Got it, 'ppreciate it!",
  error: "Ugh, how rude!"
}

Callback

Don't want to use our db? Have your own or want to do cool custom stuff with the feedback, then this is the part you should really pay attention to.

onSubmit: async (payload) => {
  console.log("🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥", payload);
  // payload  will look like
  /*
  {
    email: string;
    message: string;
    projectId: string;
    rating: number (or custom if you've overridden);
    screenshot: baseImage;
    deviceData: {
      colorScheme: MediaQueryList;
      language: BrowserLanguage;
      platform: DeviceOsType;
      referrer: string;
      url: string (where they submitted the feedback);
      userAgent: sting;
      viewport: {
        width: number;
        height: number;
      }
    }
  */
};

Public Methods

const widget = window.AoGWidget.init({...});
widget.open();  // Open the feedback modal
widget.close(); // Close the feedback modal
widget.setProject("new-project-id"); // Change project ID