Giter Club home page Giter Club logo

widget-js's Introduction

Logo

Userback Widgets

๐Ÿ“ฆ A Monolithic repository for Userback.io npm packages

version ci status known vulnerabilities license

Packages

Developing and running examples

After cloning the repo, you can install all dependencies and build the widgets with: yarn && yarn build

After which you can run an example package using yarn start:widget or yarn start:react.

To provide your api token, create a .env file containing your Userback api key like the following:

VITE_UB_TOKEN=XXXxxxXXX

End to End Testing

Test coverage is mainly achieved through playwright and docker compose. In order to run the e2e test suite run the following:

yarn test:docker

Documentation

Refer to each of the packages listed above for framework specific documentation and examples. For more information about available configuration settings and and functions available, see our Javascript API

Release Process

  1. Checkout develop against the commit you plan to release.
  2. Build a production build with yarn build.
  3. Ensure CI is green and Local testing are successful (eg: yarn test).
  4. Update all versions with yarn version:all (major/minor/patch).
  5. git commit -m "vX.X.X" and git tag vX.X.X where X.X.X is your new version.
  6. yarn publish to publish all packages to the npm repo.
  7. git push && git push --tags to push the release to github.
  8. Create a github release ๐ŸŽ‰

widget-js's People

Contributors

shard avatar lee-userback avatar aliu-userback avatar dependabot[bot] avatar ekwoka avatar hunterdes avatar eluce2 avatar josheverett avatar

Stargazers

Kelvin DeCosta avatar Bryan Alexandre Pavani Caetano avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

widget-js's Issues

require() of ES Module

This is in a next app, and it's quite confusing.

It seems like, for some reason, it's going to @userback/react but grabbing the cjs instead of the mjs file but then trying to grab the widget.mjs

I can only guess there is some kind of conflict with the exports

CodeSandbox support

  • Create a working public demo of Userback React
  • Fix issues with their "Hot Reloading" trying to double load without first using destory

Widget `core-js` which interfers with our app

Hello.

We are experiencing some issues with a dependency using window.Promise and we have tracked it down to when the Userback-widget assets are included.

Have you changed anything around this recently or is it just some incompatiblity?

Screenshot 2023-10-16 at 10 09 51

Test and document `init()` and `destory()`

Right now the packages assume you want to immediately init() on load. We should be able to support through the existing API:

  • Allow developers to hide the widget by default
  • Allow developers to load alternative configurations after calling destroy().
  • Expand docs

Unable to identify user / Using widget-js into Angular

Hi there ๐Ÿ‘‹,

I can't figure out the widget-js that I'm using in an Angular app.

I'm trying to set the user email at login/logout after UserbackWidget is created / instanciated.

How can I access to UserbackWidget as the getUserback() method always returns undefined ?

Furthermore, the promise is never resolved in my case :

import Userback from '@userback/widget'
await Userback('**USERBACK_TOKEN**')

Thanks a lot ๐Ÿ™

Feature: Svelte widget

Add a new npm module that provides a svelte interface for using Userback.

API to be determined.

Usage in Angular application

Hi, I prepared two examples of Userback in Angular application (please replace string "**Widget Access Token**" with valid access token):

  1. in this example the userback script is placed in index.html according to this docs:
    https://stackblitz.com/edit/stackblitz-starters-g9x3zk?file=src%2Fmain.ts
  • Userback is initialized and Feedback button is displayed, but options are for some reason ignored or not working.
  1. in this example I am using @userback/widget according to this docs:
    https://stackblitz.com/edit/stackblitz-starters-9hlyuh?file=src%2Fmain.ts
  • Userback is initialized and Feedback button is displayed, but it seems that the Promise is not resolved at all and options are also not working.

What am I doing wrong?
Or is there a bug?

Please, help. Thanks

Kunajs

Accessing `userback` inside the setup

What is the best way to access userback from within setup?
My case is simple, I want to use the API to set the email and the name of the user automatically.

My stack is Laravel & [Inertiajs](inertiajs.com], and what I am trying to do is to get the props that I set for Inertia via Laravel and use it to set the email and name of the user, so they don't have to do it manually.

and since $userback is a globalProperties

Userback(token, options).then((ub) => {
// eslint-disable-next-line no-param-reassign
app.config.globalProperties.$userback = ub;
});
I can't find a simple way to access it and modify the data.

Also, I can use it to hide the widget on specific pages without the need to do anything on userback management portal, a simple userback.hide() would work like

<scrip setup>
import {userback} from '@userback/widget/vue';

// This way I can hide the widget without the need to specify the URL
// in the configuration page
userback.hide();

// or

userback.email = '[email protected]';

</script>

PS: I am on a company plan, so yes I can access the JS api.

Thanks

Make `token` optional, allow delay of `init()`

Allow Userback to just "load" when no token is provided and not call init().

This will allow developers to delay the full initialization of a Userback widget until they know which token they want to use.

Support for NuxtJs (SSR)

Hi Userback team,

I want to ask if it is possible to integrate with NuxtJs (v2.12.2)?

I have tried to install the Vue version but got this error
image

Here's how I implement it
/plugins/userback.js
image

/nuxt.config.js
image

Appreciate any help, thanks!

npm install error v0.3.3

There seems to be an issue with the newest version 0.3.3, I'm getting this error: [npm ERR! Unsupported URL Type "workspace:": workspace:*]

I rolled back to version 0.3.2, but it still didn't work and we had to add an override:
"overrides": { " @Userback/react": { " @Userback/widget": "0.3.2" } }

TypeScript: UserbackWidgetSettings interface shipped with npm module is wrong / malformed.

Interface in source:

image

Interface in the npm module's widget/dist/widget.d.ts file:

image

Notice the nested widgetSettings property.

As a result of this, the following makes TypeScript happy, but doesn't properly configure the widget:

<UserbackProvider
  token={TOKEN}
  widgetSettings={{ widgetSettings: { trigger_type: 'api' } }}
>
  ...
</UserbackProvider>

While TypeScript complains about this, but the widget is properly configured:

<UserbackProvider
  token={TOKEN}
  widgetSettings={{ trigger_type: 'api' }}
>
  ...
</UserbackProvider>

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.