DEV Community: Aditya Raj

Collect Customer Feedback with Zonka AI - Embed CX Forms Anywhere

Aditya Raj — Sat, 12 Oct 2024 16:06:00 +0000

After launching your SaaS application, collecting user feedback is crucial for continuous improvement. Zonka Feedback's AI-powered survey generation simplifies this process, allowing you to easily create and embed feedback forms to gather essential metrics like NPS (Net Promoter Score) and CSAT (Customer Satisfaction Score).

Quick Start Guide

Sign up for a Zonka Feedback account
Use the AI to generate a tailored feedback form
Embed the form in your SaaS application
Collect and analyze user feedback

Generating an AI-Powered Feedback Form

Navigate to the Zonka Feedback dashboard and use the AI survey creator:

Click Create Survey > Create using AI
Describe your SaaS application and the feedback you're seeking
Specify metrics you want to collect (e.g., NPS, CSAT)
Let the AI generate your survey
Review and customize if needed

Embedding the Feedback Form

Once your form is ready, you'll receive a unique survey ID and embed code. Here's how to integrate it into popular web frameworks:

Next.js

Create a new component, e.g., FeedbackForm.js:

import { useEffect } from 'react';

const FeedbackForm = ({ surveyId }) => {
  useEffect(() => {
    // Load Zonka Feedback SDK
    const script = document.createElement('script');
    script.src = 'https://cdn.zonkafeedback.com/sdk/web/v1.js';
    script.async = true;
    script.onload = () => {
      window.ZonkaFeedback.init('YOUR_API_KEY');
      window.ZonkaFeedback.showSurvey(surveyId);
    };
    document.body.appendChild(script);

    return () => {
      document.body.removeChild(script);
    };
  }, [surveyId]);

  return <div id="zonka-feedback-container"></div>;
};

export default FeedbackForm;

Use the component in your pages:

import FeedbackForm from '../components/FeedbackForm';

export default function Dashboard() {
  return (
    <div>
      <h1>Welcome to Your Dashboard</h1>
      <FeedbackForm surveyId="YOUR_SURVEY_ID" />
    </div>
  );
}

SvelteKit

Create a new component, e.g., FeedbackForm.svelte:

<script>
  export let surveyId;

  import { onMount } from 'svelte';

  onMount(() => {
    const script = document.createElement('script');
    script.src = 'https://cdn.zonkafeedback.com/sdk/web/v1.js';
    script.onload = () => {
      window.ZonkaFeedback.init('YOUR_API_KEY');
      window.ZonkaFeedback.showSurvey(surveyId);
    };
    document.body.appendChild(script);

    return () => {
      document.body.removeChild(script);
    };
  });
</script>

<div id="zonka-feedback-container"></div>

Use the component in your pages:

<script>
  import FeedbackForm from '$lib/components/FeedbackForm.svelte';
</script>

<h1>Welcome to Your Dashboard</h1>
<FeedbackForm surveyId="YOUR_SURVEY_ID" />

Collecting Key Metrics

Zonka's AI-generated surveys can help you collect crucial SaaS metrics:

NPS (Net Promoter Score): Measure customer loyalty and satisfaction.
CSAT (Customer Satisfaction Score): Gauge overall satisfaction with your product or service.
CES (Customer Effort Score): Assess how easy it is for customers to use your SaaS.
Feature Adoption Rate: Understand which features are most popular.
Churn Risk: Identify customers who might be at risk of leaving.

Analyzing Feedback Results

Zonka Feedback provides a dashboard to view and analyze your survey results. You can also use their API to integrate the data directly into your SaaS application

Best Practices for SaaS Feedback

Timing: Trigger surveys at key moments (e.g., after completing a core task).
Frequency: Don't overwhelm users. Space out your feedback requests.
Incentivize: Offer small rewards for completing surveys to increase participation.
Act on Feedback: Regularly review and implement user suggestions.
Close the Loop: Inform users when their feedback leads to changes.

Primitives, Functions, and WTH The Value won't Update

Aditya Raj — Wed, 14 Aug 2024 03:37:04 +0000

I was working on my basics a bit and came across this problem, that I know intuitively, but never went into detail to explore. And there's no excuse for me to not have a deeper understanding of how JavaScript treats primitives.

This is by far the simplest example. Here, the myPointsvariable won't update even when I call the add3 and the remove1 functions.

let myPoints = 3;

function add3(points) {
 points += 3;
}

function remove1(points) {
  points--;
}

add3(myPoints);
remove1(myPoints);

console.log(myPoints) // 3

Here's the core concepts that make this work the way it does:

Pass by value:
In JavaScript, when you pass primitive values (like numbers) to functions, they are passed by value. This means a copy of the value is created and passed to the function, not the original variable itself.
Function scope:
Variables defined inside a function have function scope, meaning they're only accessible within that function.
Return values:
Functions in JavaScript need to explicitly return a value if you want to use the result outside the function.

Here's why myPoints isn't changing:

When I call add3(myPoints), a copy of the value of myPoints (3) is passed to the function.
Inside the function, points is a local variable that gets increased to 6.
However, this change only affects the local points variable, not the original myPoints.
The function doesn't return the new value, so the result is not stored anywhere.
The original myPoints remains unchanged.

To fix this, I have two main options:

Return the new value and reassign it:

function add3(points) { 
    return points + 3;
}

myPoints = add3(myPoints);

Pass the variable by reference (using an object):

let myPoints = { value: 3 };

function add3(pointsObj) { 
    pointsObj.value += 3;
}

add3(myPoints);
console.log(myPoints.value); // Now it's 6

Understanding TypeScript Generics: A Deep Dive with Practical Examples

Aditya Raj — Sun, 07 Jul 2024 07:29:02 +0000

TypeScript generics were messing with my head, so I decided to create a simple example to better explain it to others. Now I feel more confident in declaring generics.

I generally use Sveltekit to develop websites and web apps, and TypeScript is inevitable there.

TypeScript has become an essential tool for many developers, offering strong typing and improved code quality. One of its most powerful features is generics. In this post, we'll explore how generics work and why they're so valuable, using a practical example to illustrate their benefits.

The Problem: Type Safety vs. Flexibility

When working with TypeScript, we often face a dilemma: we want our code to be flexible enough to handle different data types, but we also want to maintain strong type safety. This is where generics come in.

Let's look at a common scenario: fetching data from an API.

A Generic Function for Fetching Data

Consider this function that fetches data from a given URL:

async function getDummyData<Type>(url: string): Promise<Type> {
  try {
    const response = await fetch(url);
    const data = await response.json();
    return data;
  } catch (error) {
    throw error;
  }
}

Here's what's happening:

We define a generic type parameter <Type>.
The function takes a url parameter of type string.
It returns a Promise<Type>, indicating that it will eventually resolve to our specified type.
We use async/await to handle the asynchronous nature of the fetch operation.
The function fetches data from the URL, parses it as JSON, and returns it.

The Power of Generics

Without generics, we might be tempted to use any as the return type:

async function getDummyData(url: string): Promise<any> {
  // ...
}

But this approach has significant drawbacks:

It removes type safety.
It eliminates helpful autocompletion in our IDE.
It negates many of the benefits of using TypeScript in the first place.

As the transcript mentions, "Any is going to not provide us any benefit of using TypeScript."

Defining Our Types

To really see the benefits of generics, let's define some types for our data:

interface Post {
  id: number;
  title: string;
  body: string;
  tags: string[];
  reactions?: {
    likes: number;
    dislikes: number;
  };
  views: number;
  userId: number;
}

type PostsArray = Post[];

Now we can use our generic function with these types:

const url = "https://api.example.com/posts";
const response = await getDummyData<PostsArray>(url);

The Benefits of Using Generics

Type Safety: TypeScript now knows exactly what type of data we're working with.
Intellisense Support: Our IDE can provide accurate autocompletion and type information.
Error Prevention: TypeScript will catch type-related errors at compile-time.

For example:

// This will cause a TypeScript error
response.id; // Error: Property 'id' does not exist on type 'PostsArray'

// This works perfectly, with full autocompletion
console.log(response[0].title);

// We get type safety for nested properties too
console.log(response[3].reactions?.likes);

As the transcript points out, "we are getting some type safety over here which we wouldn't have had if we would have just gone with the any type."

Flexibility of Generics

One of the key advantages of generics is that they allow us to define the type at the time of function call. This means we can use the same function for different data structures:

interface User {
  id: number;
  name: string;
  email: string;
}

// Fetching posts
const posts = await getDummyData<PostsArray>("https://api.example.com/posts");

// Fetching a single user
const user = await getDummyData<User>("https://api.example.com/user/1");

Handling Nested Data Structures

Sometimes, API responses might have a more complex structure. For instance, our posts might be nested under a data property:

interface ApiResponse<T> {
  data: T;
  meta: {
    total: number;
    page: number;
  };
}

const response = await getDummyData<ApiResponse<PostsArray>>(url);
console.log(response.data[0].title); // Correctly typed!
console.log(response.meta.total); // Accessing metadata

This example demonstrates how we can use generics to handle complex, nested data structures while maintaining full type safety.

Conclusion

Generics in TypeScript provide a powerful way to write flexible, reusable code while maintaining strong type safety. By using generics in functions like our getDummyData example, we can create versatile utilities that work with various data types without sacrificing the benefits of TypeScript's type system.

As you continue to work with TypeScript, you'll find that generics become an indispensable tool in your programming toolkit, helping you write more robust and maintainable code. They allow you to "retain the flexibility of passing the type argument later to the function and to also ensure type safety throughout the wrap," as mentioned in the transcript.

I work at company, where we develop custom integrations for QuickBooks and other business solutions. TypeScript helps us out in developing robust integration with minimal runtime error.

What are some benefits that you've gained from TypeScript?

Intuit OAuth 2.0 for SvelteKit

Aditya Raj — Tue, 18 Jun 2024 07:41:27 +0000

Learn how to authenticate QuickBooks Online users in your Intuit app using OAuth 2.0 with this straightforward tutorial. This guide is compatible with Express, Next.js, and SvelteKit.

Steps to Integrate QuickBooks API in SvelteKit

OAuthClient Initialization:
Initialize OAuthClient with the correct environment variables:

import OAuthClient from 'intuit-oauth';
import { CLIENT_ID, CLIENT_SECRET, ENVIRONMENT, REDIRECT_URI } from '$env/static/private';

const oauthClient = new OAuthClient({
    clientId: CLIENT_ID,
    clientSecret: CLIENT_SECRET,
    environment: ENVIRONMENT,
    redirectUri: REDIRECT_URI
});

Generate Authentication URI:
Redirect users to this URI for QuickBooks authorization:

const authUri = oauthClient.authorizeUri({
    scope: [OAuthClient.scopes.Accounting, OAuthClient.scopes.OpenId],
    state: 'Init'
});

// Use this URI to redirect users
return { authUri };

Redirect Users:
Provide a link for users to start the OAuth flow:
```
<a href={$authUri}>Connect to QuickBooks</a>
```

Handle Callback and Token Exchange:
Create a route to handle the QuickBooks redirect and exchange the authorization code for a token:

import { json } from '@sveltejs/kit';

export async function GET({ url }) {
    const authCode = url.searchParams.get('code');
    const tokenResponse = await oauthClient.createToken(authCode);

    // Log and store the token securely
    console.log('Token:', tokenResponse);
    return json({ status: 200 });
}

Use Access Token for API Requests:
With the access token, make authenticated requests to QuickBooks API:

export async function GET({ locals }) {
    oauthClient.setToken(locals.token);

    try {
        const companyInfo = await oauthClient.makeApiCall({
            url: `${oauthClient.environment === 'sandbox' ? '<https://sandbox-quickbooks.api.intuit.com>' : '<https://quickbooks.api.intuit.com>'}/v3/company/YOUR_COMPANY_ID/companyinfo`
        });

        return json(companyInfo.getJson());
    } catch (error) {
        console.error('API call error:', error);
        return json({ error: 'API call failed' }, { status: 500 });
    }
}

Additional Notes

Token Storage: Store tokens securely; avoid client-side exposure.
Environment Variables: Verify variable names and values.
OAuth Flow: Remember, the OAuth process involves user redirection for authorization.

This concise guide simplifies integrating QuickBooks Online with SvelteKit using OAuth 2.0. You can read more of these guides that I'll be launching int he coming month on my own website, Lazy Lync.