fogbender/fogbender-oss

Open source packages to work with fogbender.com

Fogbender open-source packages

Open source packages to work with https://fogbender.com

What is Fogbender?

Fogbender is a helpdesk product for supporting customer teams (not individuals). Check out our website to learn more.

What is this repository?

This repository contains the source code of Fogbender packages published to npm. Here, you can learn how those packages are built, as well as contribute by filing issues and creating pull requests.

Which packages?

• fogbender-proto - low-level package that allows you to connect to our real-time WebSocket API (you'll need this if you want to create your own Fogbender chat application or bot)
• fogbender - vanilla JavaScript module to embed the Fogbender Widget on your website
• fogbender-react - React wrapper for fogbender to embed the Fogbender Widget on your website
• fogbender-vue - experimental Vue wrapper for fogbender to embed the Fogbender Widget on your website
• fogbender-element - Web Components wrapper for fogbender to embed the Fogbender Widget on your website

Examples

• Vanilla JavaScript on CodeSandbox
• React on CodeSandbox
• Vue on CodeSandbox
• Element via CDN on CodeSandbox
• Element with Lit on CodeSandbox

fogbender-oss's Issues

it should be possible to set custom logic when resizing support iframe

In fogbender package adaptIFrame function is called to change iframe size when window is resizing.

We already have disableFit option in renderIframe. So we might want to support that prop in fogbender-react or add a new one that can do custom resizing logic:

    const onResize = (el: HTMLIFrameElement) => {
      el.style.height = `${window.innerHeight - 60}px`;
    };

so to override resizing logic, we can simply add something like this in adaptIFrame:

    if (onResize) {
      return onResize(iFrame);
    }

FogbenderUnreadBadge should be exported from fogbender-vue and fogbender-element

See https://demo1.fogbender.com/showcase for examples of usage

add separate entry point for node/server to fogbender-element

https://stackblitz.com/edit/node-sdykxj?file=index.js

running "node index.js" crashes server because this package is incompatible with server environments

we need to have separate server/browser entries for fogbender-element similar to how we do it for fobbender:

update fognbeder-element README

Let's use https://www.npmjs.com/package/fogbender as the templates. Add https://codepen.io/jlarky/pen/vYjVYxM?editors=1010 as an example. Also we need to add fogbender-element to main README

add tubro support

we use https://turborepo.org/ in our main project, and we can reuse something like https://github.com/withastro/astro/blob/main/turbo.json as a template

how to generate FOG_OSS_GITHUB_TOKEN fog changeset CI action

In order to create GITHUB_TOKEN which is limited to one repo you have to create OAuth app and install it. We are following this guide https://wesbos.com/scoped-github-access-token

1. the app https://github.com/organizations/fogbender/settings/apps/fogbender-oss-app
2. https://github.com/organizations/fogbender/settings/apps/fogbender-oss-app/permissions set app scopes:

3. install app https://github.com/organizations/fogbender/settings/apps/fogbender-oss-app/installations and select only one repo

4. you will get redirected to URL like `https://github.com/organizations/fogbender/settings/installations/28900114` write down the install id somewhere

5. in https://github.com/organizations/fogbender/settings/apps/fogbender-oss-app get App ID and private key file
6. use the script from https://wesbos.com/scoped-github-access-token and it will return you a token that looks like { token: 'ghs_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx' }
7. Go to https://github.com/fogbender/fogbender-oss/settings/secrets/actions and store that token as FOG_OSS_GITHUB_TOKEN