Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add helpscout's embedded script #758

Merged
merged 53 commits into from May 16, 2019

Conversation

Projects
None yet
5 participants
@AquiGorka
Copy link
Contributor

commented Apr 30, 2019

References: #675 & aragonone/product#45

Update: added react-helmet and it worked like a breeze to be able to dynamically inject the scripts.

image

Animated transitions:

Pending:

  • Illustration instead of logo
  • Mobile/responsive
  • Animate transitions
  • Refactor: remove Beacon's button and add custom one (styled) to open/close Help box

How to test:

cd into `aragon/aragon`
git fetch
git checkout feature/user-feedback-support
npm i
npm run start
  • Open up browser to localhost:3000
  • Click on the lower right placed button (as much and as quickly as you can)
  • To "opt-out" go to dev tools > application > local storage and remove the helpscout-beacon option
  • Profit

@AquiGorka AquiGorka requested review from bpierre, sohkai and 2color Apr 30, 2019

@luisivan

This comment has been minimized.

Copy link
Member

commented Apr 30, 2019

@AquiGorka just a quick note, it's important that the script loads only when the user opts into it (see design)

@AquiGorka AquiGorka force-pushed the feature/user-feedback-support branch 3 times, most recently from 4dd433d to b007ffb May 2, 2019

@AquiGorka AquiGorka added the wip label May 2, 2019

@AquiGorka AquiGorka changed the title Add helpscout's embedded script [WIP] Add helpscout's embedded script May 2, 2019

@AquiGorka AquiGorka force-pushed the feature/user-feedback-support branch 3 times, most recently from e4c69a4 to d777b3f May 2, 2019

@AquiGorka AquiGorka changed the title [WIP] Add helpscout's embedded script Add helpscout's embedded script May 3, 2019

@AquiGorka AquiGorka removed the wip label May 3, 2019

@AquiGorka AquiGorka requested a review from dizzypaty May 3, 2019

@AquiGorka AquiGorka force-pushed the feature/user-feedback-support branch 3 times, most recently from ab2d222 to 65eb353 May 3, 2019

Show resolved Hide resolved src/components/Beacon/Beacon.js Outdated
Show resolved Hide resolved src/components/Beacon/Beacon.js Outdated
Show resolved Hide resolved src/components/Beacon/Beacon.js Outdated
@2color

This comment has been minimized.

Copy link
Contributor

commented May 7, 2019

Looking good!

Before opting in, when opening and closing quickly, there's a glitch where the opt in panel is rendered at the top.
ScreenRecording20190507at1

@AquiGorka

This comment has been minimized.

Copy link
Contributor Author

commented May 7, 2019

@2color give a man a button and he'll click on it till something breaks 😄
Thank your for catching that odd behaviour, fixed in 568f6e2

@sohkai

sohkai approved these changes May 7, 2019

Copy link
Member

left a comment

Wondering if our HelpScout documentation is indexed in any way that it would be useful for us to use Beacon.suggest()?

E.g. the docs on onboarding and when you're on the token manager should be quite different.


It would also be great if we could detect outside clicks when the Beacon is open and automatically close it.


I've also noticed some pages with assets, like Permissions, that don't load their images (browser seems to be blocking them for some reason).


I'm also getting this HTTP error when clicking on the happy / sad faces at the end of an article:

{"code":409,"status":"CONFLICT","message":"Conflict","correlationId":"caafc8a0-8e42-48d9-b436-5a5c6117e4e2#268078"}
Show resolved Hide resolved src/App.js Outdated
Show resolved Hide resolved src/components/Beacon/Beacon.js Outdated
Show resolved Hide resolved src/components/Beacon/Beacon.js Outdated
Show resolved Hide resolved src/components/Beacon/Beacon.js Outdated
Show resolved Hide resolved src/components/Beacon/Beacon.js Outdated
Show resolved Hide resolved src/components/Beacon/Beacon.js Outdated
Show resolved Hide resolved src/components/Beacon/Beacon.js Outdated
Show resolved Hide resolved src/components/Beacon/Beacon.js Outdated
Show resolved Hide resolved src/components/Beacon/Beacon.js Outdated
Show resolved Hide resolved src/components/Beacon/Beacon.js Outdated
@AquiGorka

This comment has been minimized.

Copy link
Contributor Author

commented May 8, 2019

@sohkai,

Wondering if our HelpScout documentation is indexed in any way that it would be useful for us to use Beacon.suggest()?

I'd assume this can be taken care of via the HelpScout dashboard no? Setting some content to specific url's? cc @john-light
In case it can't be done via the dashboard let's follow up with a new issue.

It would also be great if we could detect outside clicks when the Beacon is open and automatically close it.

I thought of this and almost implemented it, what stopped was that HelpScout themselves do not hide the help window on clicks outside and I imagine this may be because some users may want to interact with the app while the help popover is still open.

I've also noticed some pages with assets, like Permissions, that don't load their images (browser seems to be blocking them for some reason).

cc @john-light might it be a path/asset issue?

I'm also getting this HTTP error when clicking on the happy / sad faces at the end of an article:

Found this: https://developer.helpscout.com/mailbox-api/overview/errors/#conflict
Maybe because of localhost? Let's follow up when in staging

@sohkai

This comment has been minimized.

Copy link
Member

commented May 8, 2019

I'd assume this can be taken care of via the HelpScout dashboard no? Setting some content to specific url's? cc @john-light
In case it can't be done via the dashboard let's follow up with a new issue.

I think the problem with doing this in the dashboard is that we don't have deterministic URLs for loaded apps (for onboarding, home, permissions, app center, and settings this isn't a problem). When we load the Token Manager, for example, we could detect the locator change, find the app for the proxy address in the locator, and then suggest articles for this specific app.

From their docs it looks like we may just have to hardcode a list of HelpScout document IDs to suggest rather than a generic text match :/?

@AquiGorka

This comment has been minimized.

Copy link
Contributor Author

commented May 8, 2019

@sohkai ok, I'll create a new issue to list all places where we need suggestions and implement such suggestions.

Issue: aragonone/product#92

@AquiGorka AquiGorka referenced this pull request May 8, 2019

Open

Help Scout suggestions #92

@AquiGorka AquiGorka force-pushed the feature/user-feedback-support branch from 94fc78e to c7b6e62 May 15, 2019

@AquiGorka AquiGorka force-pushed the feature/user-feedback-support branch from 3bfa724 to 4a6c459 May 16, 2019

Show resolved Hide resolved src/hooks.js Outdated

@AquiGorka AquiGorka merged commit a67a760 into master May 16, 2019

7 checks passed

License Compliance All checks passed.
Details
build build
Details
continuous-integration/travis-ci/pr The Travis CI build passed
Details
continuous-integration/travis-ci/push The Travis CI build passed
Details
install install
Details
license/cla Contributor License Agreement is signed.
Details
lint lint
Details

@AquiGorka AquiGorka deleted the feature/user-feedback-support branch May 16, 2019

@AquiGorka AquiGorka referenced this pull request May 16, 2019

Open

Pending items HelpScout implementation #783

0 of 3 tasks complete
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.