# Embed "GITHUB DISCUSSION" Anywhere !

Ever wondered how useful it could be if we could embed GitHub Discussions to our blogs, documentation or anywhere we like Well I Found an application that does this seamlessly, In this blog we'll learn to use Gicus!

## Introduction

A comments system powered by GitHub Discussions. Let visitors leave comments and reactions on your website via GitHub! Heavily inspired by utterances.

## Features

* Open-source. 🌏
    
* No tracking, no ads, always free. 📡 🚫
    
* No database is needed. All data is stored in GitHub Discussions.
    
* Supports custom themes! 🌗
    
* Supports multiple languages. 🌐
    
* Extensively configurable. 🔧
    
* Automatically fetches new comments and edits from GitHub. 🔃 Can be self-hosted! 🤳
    

## How it works

When giscus loads, the [GitHub Discussions search API](https://docs.github.com/en/graphql/guides/using-the-graphql-api-for-discussions#search) is used to find the Discussion associated with the page based on a chosen mapping (URL, `pathname`, `<title>`, etc.). If a matching discussion cannot be found, the giscus bot will automatically create a discussion the first time someone leaves a comment or reaction.

To comment, visitors must authorize the [giscus app](https://giscus.app/) to [post on their behalf](https://docs.github.com/en/apps/creating-github-apps/authenticating-with-a-github-app/authenticating-with-a-github-app-on-behalf-of-a-user) using the GitHub OAuth flow. Alternatively, visitors can comment on the GitHub Discussion directly. You can moderate the comments on GitHub.

## Requirements

* The repository is [public](https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/managing-repository-settings/setting-repository-visibility#making-a-repository-public), otherwise, visitors will not be able to view the discussion.
    
* The [giscus app](https://giscus.app/) is installed, otherwise, visitors will not be able to comment and react.
    
* The Discussions feature is turned on by [enabling it for your repository](https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/enabling-features-for-your-repository/enabling-or-disabling-github-discussions-for-a-repository).
    

## Meeting Requirements

* enable [Discussions for your repo](https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/enabling-features-for-your-repository/enabling-or-disabling-github-discussions-for-a-repository)
    
* ensure that your repo is public
    
* install [Gicus app & configure](https://github.com/apps/giscus)
    

![application](https://cdn.hashnode.com/res/hashnode/image/upload/v1686546954877/a0afe1fe-205b-4f74-a5e9-236d72517e28.png align="left")

![gicus](https://cdn.hashnode.com/res/hashnode/image/upload/v1686546957643/1e144f9f-d9ed-41fa-a729-6c3cccbf9eb1.png align="left")

## Configure

* choose language and enter repository in (username/reponame) format is above requirements are satisfied you'd see a green tick
    
    ![gicus](https://cdn.hashnode.com/res/hashnode/image/upload/v1686546959294/284128b3-ef83-4442-a88a-8dcba8232d43.png align="left")
    
* Choose the mapping between the embedding page and the embedded discussion, you can play around but you can proceed by choosing 2nd option
    
    ![gius mapping](https://cdn.hashnode.com/res/hashnode/image/upload/v1686546961895/d8e66a41-f965-41aa-aa00-8983bec9001b.png align="left")
    
* Choose the discussion category where new discussions will be created. It is recommended to use a category with the Announcements type so that new discussions can only be created by maintainers and Gicus.
    

![discuss cateogry](https://cdn.hashnode.com/res/hashnode/image/upload/v1686546963571/1096ee48-0758-4a7e-bae3-f4daada93b8d.png align="left")

* choose from a variety of themes
    

![gicus themes](https://cdn.hashnode.com/res/hashnode/image/upload/v1686546965086/cba63772-e2f7-4205-aa93-059a0911ace0.png align="left")

* and you are done, it'll generate a script that can be used to embed discussions !!!
    

![gicus script](https://cdn.hashnode.com/res/hashnode/image/upload/v1686546967513/05ad9891-c866-40c7-a943-e40f2c92ca7c.png align="left")

* you can add this script within &lt;body&gt; tag
    

## Output

* this is how the light-contrast theme looks
    
    ![output](https://cdn.hashnode.com/res/hashnode/image/upload/v1686546970025/38212948-09ac-48f3-a37c-918a03746697.png align="left")