Skip to content

Setting up your Widget

Jump to bottom
Corey edited this page Jul 8, 2026 · 8 revisions

Your bot and widget belongs to an Application. This is where you can customize how your Widget will show to other people.

Setting up your Widget using an extension (Recommended)

Step 1: Download the extension from GitHub

  1. Download or clone https://github.com/TheCreativeGod/Discord-Widgets-Extension
  2. Chrome / Edge / Brave: chrome://extensions → Enable Developer Mode → Load unpacked → select the chrome-extension/ folder
  3. Firefox: about:debugging#/runtime/this-firefox → Load Temporary Add-on → select firefox-extension/manifest.json

Step 2: Import the widget layout

  1. Go to https://discord.com/developers/applications and reload the page once after installing the extension
  2. Click the Widget Creator button in the bottom-right corner
  3. Paste the full contents of the json file of your choosing from this repo's widget-template folder into the JSON box
  4. Click Import — the extension creates the application with the template layout and stat icons pre-configured
  5. Complete any captcha / 2FA if prompted
  6. Head back to your Discord, go to Settings → Authorized Apps and check if your new application (should usually be named "My New Widget") appears in it. If it does, de-authorize the app. We will be re-authorizing the application later when we set up the bot.

Note: After importing, all data fields will appear empty — this is expected. The bot hasn't pushed any stats yet. Click the pencil icon on each data field to confirm the mapping is correct.

Setting up your Widget (manually)

Step 1: Create a Developer Application

  1. Open your web browser on a computer and head to Discord Developer Portal
  2. Log in with your usual Discord account credentials if prompted.
  3. Click the blue New Application button in the top-right corner.
  4. Give your app a name (e.g., "PHIGHTING!" or [Your PHIGHTING! scrim team name]).
    • NOTE: Your application's name, along with its icon will be used as the Widget's name and icon, so choose a name that you want to be featured on your profile!
  5. Check the box to agree to the developer terms and click Create.

Step 2: Request to use the Social SDK

In order to use the Widget, you have to use the Social SDK. In the left sidebar, head to Games - Social SDK. Here you will be forced to fill out information about your "company". You can fill this with whatever you like, as long as it is required in the Required fields marked with a "*". After filling in the "necessary information", check the checkbox at the bottom labelled "I consent" and press Submit.

Step 3: Unlock the hidden "Widget" menu

By default, the custom widget editor is hidden from view. We are going to execute a command which will push the website to reveal it to us using your browser's console.

  1. While staying on your new application's page, press F12 on your keyboard (or right-click anywhere on the page and select Inspect).
  2. Look at the top of the complex panel that just popped up and click on the tab labeled Console.
  3. Copy the exact block of code below, paste it into the blank line at the very bottom of the console, and press Enter:
let _mods = webpackChunkdiscord_developers.push([[Symbol()],{},r=>r.c]);
webpackChunkdiscord_developers.pop();

let findByProps = (...props) => {
    for (let m of Object.values(_mods)) {
        try {
            if (!m.exports || m.exports === window) continue;
            if (props.every((x) => m.exports?.[x])) return m.exports;

            for (let ex in m.exports) {
                if (props.every((x) => m.exports?.[ex]?.[x]) && m.exports[ex][Symbol.toStringTag] !== 'IntlMessagesProxy') return m.exports[ex];
            }
        } catch {}
    }
}

findByProps("getAll").getAll().find(e=>e.getName() === "ApexExperimentStore").createOverride("2026-03-widget-config-editor", 1)

NOTE: You will have to run the above code again whenever you come back to, or refresh, the page.

  1. Go back to the Applications page (located in the top left of the page). DO NOT refresh the page or click on the "Back/Forward" button on your browser.
  2. Re-enter the application, and look over to the left sidebar of the page. In the "Games" tab. you should be able to see the "Widget" button appearing.

Step 4: Design your custom layout

Now comes the creative part. Inside your newly revealed Widget tab, you can customize exactly what your profile display looks like.

These are the most important aspects of the Widget for it to be able to be displayed on your profile:

  • Widget Top: This allows you to add a title, some subtitle descriptions (up to 3), and an icon image (which supports animated GIFs if you want your profile to pop!).
  • Widget Bottom: Perfect for adding customized stat numbers or featured items, depending on your preferred layout!
  • Add Widget Preview: This is a placeholder widget preview sitting in your "Add Widget" menu. Even though it is not shown publicly, adding an image will help anyone who is using this (including you!) to recognize the widget by just looking at the character alone.
  • Mini Profile: This is a smaller preview of your widget when someone opens up your Mini Profile. It is highly recommended to feature your name/username and your featured Phighter for this Mini Widget.

Author's Note: Guide on how you can design your widget will be added later in a future update to this wiki. It is highly recommended to use the pre-made templates in this repo if you are planning to use this repository's bot alongside the Widget.

Once you are completely satisfied with your layout, make sure to click the Save Changes and Publish button at the top of the screen.

Clone this wiki locally