{"id":16117277,"url":"https://github.com/icheer/web-assistant","last_synced_at":"2025-10-24T09:25:41.250Z","repository":{"id":49757248,"uuid":"445131459","full_name":"icheer/web-assistant","owner":"icheer","description":"A simple web component built with svelte, providing version introduction \u0026 guideline instruction UI.","archived":false,"fork":false,"pushed_at":"2023-12-20T12:55:00.000Z","size":864,"stargazers_count":5,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-05-22T06:24:14.858Z","etag":null,"topics":["feedback","guideline","introduction","svelte","walkthrough","webcomponents"],"latest_commit_sha":null,"homepage":"https://guidebook.topurl.cn","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/icheer.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-01-06T10:36:27.000Z","updated_at":"2023-03-27T14:03:56.000Z","dependencies_parsed_at":"2023-12-20T14:31:13.603Z","dependency_job_id":"35355af7-47c5-4068-943b-9976e1603d16","html_url":"https://github.com/icheer/web-assistant","commit_stats":{"total_commits":80,"total_committers":3,"mean_commits":"26.666666666666668","dds":0.475,"last_synced_commit":"78a7f172334911a844c61f7dae2ad4643a1bec60"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/icheer/web-assistant","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/icheer%2Fweb-assistant","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/icheer%2Fweb-assistant/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/icheer%2Fweb-assistant/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/icheer%2Fweb-assistant/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/icheer","download_url":"https://codeload.github.com/icheer/web-assistant/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/icheer%2Fweb-assistant/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260273423,"owners_count":22984492,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["feedback","guideline","introduction","svelte","walkthrough","webcomponents"],"created_at":"2024-10-09T20:43:49.530Z","updated_at":"2025-10-24T09:25:41.151Z","avatar_url":"https://github.com/icheer.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# web-assistant\n\nA simple web component built with [svelte](https://github.com/sveltejs/svelte), providing version introduction \u0026 guideline instruction UI.\n\n- dependency free\n- compatible with any javascript framework/UI library\n- light-weighted (gzipped: 76KB)\n- non-invasive design, drive the UI simply by javascript \u0026 json\n- auto switch languages(CN or EN) depends on your \\\u003chtml lang=\"___\"\\\u003e\n\n## Live demo\n\n\u003ca href=\"https://guidebook.topurl.cn\" target=\"_blank\"\u003ehttps://guidebook.topurl.cn\u003c/a\u003e\n\n\u003ca href=\"https://guidebook.topurl.cn\" target=\"_blank\"\u003e\n  \u003cimg src=\"https://i.ibb.co/jyGnQ53/20220223181550.png\" alt=\"screenshot\" /\u003e\n\u003c/a\u003e\n\n## How to use\n\nInstall with npm:\n\n```bash\nnpm install web-assistant --save\n```\n\nand import it in your code:\n\n```js\nimport 'web-assistant';\n```\n\nYou can **also** load the package from a CDN such as jsdelivr (or unpkg):\n\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/web-assistant@latest/lib/index.min.js\"\u003e\u003c/script\u003e\n```\n\nThen you can call `window.webAssistant.guideline(...)` or `window.webAssistant.intro(...)` directly in your js code.\n\nThe guideline parameters example:\n```js\nwindow.webAssistant.guideline({\n  list: [\n    {\n      selector: 'h1',\n      position: 'bottom-end',\n      text: 'Line1\\nLine2\\nLine3\\nThis is a title',\n      width: '220px',\n      onNext: () =\u003e console.log('next tips')\n      // You can use async function here, and guideline won't go on until the async function finished\n    },\n    {\n      selector: 'p.desc:nth-child(2)',\n      position: 'top-end',\n      text: 'This a testing paragraph...',\n      maxWidth: '380px',\n      onPrev: () =\u003e console.log('prev')\n    },\n    {\n      selector: '.btn',\n      position: 'right',\n      text: 'This is the submit button, and the guideline ends here.'\n    }\n  ],\n  canClose: false,\n  showSteps: true,\n  confirmText: 'I know',\n  onConfirm: () =\u003e console.log('confirmed')\n});\n```\n\nThe introduction parameters example:\n```js\nwindow.webAssistant.intro({\n  title: 'v1.20 - New Feature',\n  list: [\n    {\n      text: 'Surprise steepest recurred landlord mr wandered amounted of.\\nContinuing devonshire but considered its.\\nRose past oh shew roof is song neat.\\nDo depend better praise do friend garden an wonder to.\\nIntention age nay otherwise but breakfast.\\nAround garden beyond to extent by.'\n    },\n    {\n      text: 'Kindness to he horrible reserved ye. Effect twenty indeed beyond for not had county. The use him without greatly can private. Increasing it unpleasant no of contrasted no continuing. Nothing colonel my no removed in weather. It dissimilar in up devonshire inhabiting.'\n    },\n    {\n      text: 'This is \u003cb\u003ean example of\u003c/b\u003e rich text\u003cimg src=\"https://news-bos.cdn.bcebos.com/mvideo/log-news.png\" alt=\"baidu\" style=\"height: 36px\" /\u003e'\n    }\n  ],\n  dangerouslyUseHTMLString: true,\n  showSteps: true,\n  canClose: true,\n  onClose: () =\u003e console.log('closed'),\n  confirmText: 'I know',\n  onConfirm: () =\u003e console.log('confirmed'),\n  style: {\n    width: '50vw',\n    height: '40vh'\n  }\n});\n```\n\nThe feedback parameters example:\n```js\nwindow.webAssistant.feedback({\n  title: 'Suggestion \u0026 Feedback',\n  bottom: '12px',\n  fullNameVisible: true,\n  emailVisible: true,\n  emailRequired: true,\n  problemVisible: true,\n  problemList: [\n    {\n      label: 'System features',\n      value: 'system'\n    },\n    {\n      label: 'User experience',\n      value: 'uex'\n    },\n    {\n      label: 'Others',\n      value: 'other'\n    }\n  ],\n  screenshotNeeded: true,\n  callback: fd =\u003e {\n    fetch('/some-api/feedback/submit', {\n      method: 'POST',\n      body: fd\n    });\n  }\n});\n```\n\n## Parameters\n### guideline params:\n| Key | Description | Type | Default value |\n| ---- | ---- | ---- | ---- |\n| list | [Required] guideline list | Array | (See guideline list item ↓) |\n| showSteps | Decide whether shows steps in the \"Next\" button or not | Boolean | false |\n| dangerouslyUseHTMLString | Decide the guideline content renders HTML tag or not | Boolean | false |\n| canClose | Decide the guideline can be closed before it is finished | Boolean | false |\n| closeText | The close button's text | String | Close/关闭 |\n| onClose | Function called after closed | Function | noop |\n| canPrev | Decide the guideline can go previous step or not | Boolean | true |\n| prevText | The prev button's text | String | Previous/上一条 |\n| nextText | The next button's text | String | Next/下一条 |\n| confirmText | The confirm button's text | String | Confirm/确定 |\n| onConfirm | Function called after confirmed | Function | noop |\n| popperStyle | Inline style string that attached to the popper element | String | - |\n\n#### *guideline list item*:\n| Key | Description | Type | Default value |\n| ---- | ---- | ---- | ---- |\n| selector | [Required] CSS selector to find the DOM | String | - |\n| position | The popper's position: \u003cbr\u003etop-start/top/top-end/bottom-start/bottom/bottom-end/left-start/left/left-end/right-start/right/right-end | String | bottom |\n| text | The popper's content text | String | - |\n| width | The popper's width | String | - |\n| maxWidth | The popper's max-width | String | - |\n| onPrev | Function called when going previous step | Function | noop |\n| onNext | Function called when going next step | Function | noop |\n\n### intro params:\n| Key | Description | Type | Default value |\n| ---- | ---- | ---- | ---- |\n| title | Intro's title | String | Intro |\n| list | [Required] intro list | Array | (See intro list item ↓) |\n| showSteps | Decide whether shows steps in the \"Next\" button or not | Boolean | false |\n| dangerouslyUseHTMLString | Decide the intro content renders HTML tag or not | Boolean | false |\n| canClose |  Decide the intro can be closed before it is finished | Boolean | false |\n| onClose | Function called after closed | Function | noop |\n| prevText | The prev button's text | String | Previous/上一条 |\n| nextText | The next button's text | String | Next/下一条 |\n| confirmText | The confirm button's text | String | Confirm/确定 |\n| onConfirm | Function called after confirmed | Function | noop |\n| style | Style object that affects intro element | Object | {} |\n\n#### *intro list item*:\n| Key | Description | Type | Default value |\n| ---- | ---- | ---- | ---- |\n| text | The intro content | String | - |\n\n### feedback params:\n| Key | Description | Type | Default value |\n| ---- | ---- | ---- | ---- |\n| title | The title of feedback for display | String | (i18n) |\n| bottom | The distance to the bottom of viewport | String | 15px |\n| folded | If the feedback panel is folded at the begining | Boolean | true |\n| emailVisible | If the email input is shown | Boolean | true |\n| emailRequired | If the email is required | Boolean | false |\n| nameVisible | If the fullName input is shown | Boolean | false |\n| nameRequired | If the fullName is required | Boolean | false |\n| problemVisible | If the problem select is shown | Boolean | false |\n| problemRequired | If the problem is required | Boolean | true |\n| problemList | The problem list | Array | (See feedback problem list item ↓) |\n| screenshotVisible | If the email input is shown | Boolean | true |\n| screenshotNeeded | If the email is required | Boolean | false |\n| placeholder | The placeholder text of the suggestion textarea | String | - |\n| callback | Function called when submitting | Function | noop |\n\n#### *feedback problem list item*:\n| Key | Description | Type | Default value |\n| ---- | ---- | ---- | ---- |\n| label | The problem description | String | - |\n| value | The problem code | String | - |\n\n### cursor params:\n| Key | Description | Type | Default value |\n| ---- | ---- | ---- | ---- |\n| type | Cursor appearance: default/reverse/pointer/move/grab | String | default |\n| from | Position where cursor moves from (can be x,y or css selector. i.e. `100,300` or `button.submit` or `document.body`) | String or HTMLElement | - |\n| to | [Required] Position where cursor moves to (same as 'from') | String or HTMLElement | - |\n| scale | Cursor's scale | Number | 1 |\n| duration | Cursor's moving duration | Number | 1500 |\n| stay | Cursor will stay at the end position for specified ms | Number | 150 |\n| clickAfterMove | Cursor will automatically click the `to` element after moving | Boolean | false |\n| clickEffect | Cursor will show a red circle animation when clicking | Boolean | false |\n| overlay | A overlay will show when the cursor is displayed (prevent the other user's actions) | Boolean | false |\n\n### mask params:\n| Key | Description | Type | Default value |\n| ---- | ---- | ---- | ---- |\n| duration | milliseconds.\u003cbr\u003eempty or 0 means mask never dismiss,\u003cbr\u003ethen you should call window.webAssistant.clear() to dismiss it manually. | Number | - |\n\n### toast params:\n| Key | Description | Type | Default value |\n| ---- | ---- | ---- | ---- |\n| text | The toast text | String | - |\n| duration | milliseconds | Number | 3000 |\n| position | The toast position: bottom/top/center | String | bottom |\n\n## TODO\n- [ ] mobile compatible\n- [ ] ....\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ficheer%2Fweb-assistant","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ficheer%2Fweb-assistant","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ficheer%2Fweb-assistant/lists"}