diegocouto/guidde

A simple customer support tool for your business.

Guidde

A simple customer support tool for your projects built with Next.js. Check out a live demo.

Getting started

To get Guidde up and running in your local environment:

1. Clone the code locally: git clone [email protected]:diegocouto/guidde.git
2. Install all dependencies: cd guidde && yarn install
3. Run it in development mode: yarn dev

Make it yours

Before you can start preparing to publish your new knowledge base, you might want to update and implement a few things:

• Set your own name, brand URL and social links on /utils/constants/app.ts
• Make sure you have updated .env.production to match the URL of your knowledge base
• You can easily update the primary color on tailwind.config.js

Keeping track of customer support requests

You probably noticed that a Contact us button is available on Guidde's main navigation bar. Although the form itself is ready to use, you'll have to implement your own logic to submit this content in a way that makes sense for your current workflow.

In order to do so, update api/messages.ts. Here you can see an example of how it would look like when using SendGrid to send your messages:

import Mail from '@sendgrid/mail';
import { NextApiRequest, NextApiResponse } from 'next';

Mail.setApiKey(process.env.SENDGRID_API_KEY);

export default (req: NextApiRequest, res: NextApiResponse) => {
  if (req.body) {
    const { email, subject, message } = JSON.parse(req.body);

    const msg = {
      to: '[email protected]',
      from: '[email protected]',
      replyTo: email,
      subject: subject,
      text: message,
    };

    if (process.env.SENDGRID_API_KEY) {
      return Mail.send(msg)
        .then(() => {
          res.json({ success: true });
        })
        .catch((error) => {
          console.error(error);
          res.json({ success: false });
        });
    }

    res.json({ success: false });
  }
};

Deploy

As a Next.js app, you have many options and different services where you can deploy your new knowledge base to. It's strongly recommended that you check Next.js's deployment documentation to choose what's the approach that makes more sense to you.

guidde's Issues

Flag articles as helpful or not

As an author:

• I want to have access to how helpful an article has been to our users;
• I want to use my own analytics platform to keep track of these metrics.

As a user:

• I want to be able to indicate whether an article has been helpful or not;

Show related articles

As a user:

• I want to see some related (same category) articles to the one I'm currently reading.

Use social meta tags

As an author:

• I want all my articles to include social meta tags in a way that makes the content more engaging when shared on social media;

Show custom error page

As a user:

• I want the error page to clarify what's happening and provide me a way to recover from the main issue.

Show categories on the homepage

As a user:

• I want to see all available categories on the homepage;
• I want to see them ordered in a way that helps me solve my most common issues quickly.

Use as a widget

As an author:

• I want to embed Guidde as a widget on my website;

Improve README

As an author:

• I want to easily understand how helpful Guidde can be to me;
• I need quick & simple getting started instructions;
• I want to know how to deploy my own knowledge base;

Show articles

As a user:

• I want to write my posts using markdown;
• I want to access my posts from an URL based on the following format: domain.com/category-name/post-title;

List articles by category

As a user:

• I want to see a list of all posts that belong to a given category.

Search by articles

As an author:

• I want to include custom tags to articles. These tags are searchable.

As a user:

• I want to search for an article based on its title, content, or tags.

Submit support request

As a user:

• I want to be able to submit a support request when needed;