{"_id":"@canvas-medical/embed-appointments","_rev":"6-0aae454ed4a0b81635d7a6d9cbc74278","name":"@canvas-medical/embed-appointments","dist-tags":{"latest":"0.0.9"},"versions":{"0.0.7":{"name":"@canvas-medical/embed-appointments","version":"0.0.7","_id":"@canvas-medical/embed-appointments@0.0.7","maintainers":[{"name":"tboyles-cm","email":"thomas.boyles@canvasmedical.com"},{"name":"mvanlonden","email":"melvanlonden@gmail.com"},{"name":"beaugunderson","email":"beau@beaugunderson.com"},{"name":"eabruzzese","email":"eric.abruzzese@gmail.com"}],"dist":{"shasum":"c60a415642f60776393061f5fb10bf8d1450c6d6","tarball":"https://registry.npmjs.org/@canvas-medical/embed-appointments/-/embed-appointments-0.0.7.tgz","fileCount":19,"integrity":"sha512-LuwmHtem8P5iCZ4lIke1Pe9I6JCyiOIeDj8ltYlQ684fwaXmqKozPbkyLuqdswrzTnvYRqPPsKJw/K/H2Iy0aA==","signatures":[{"sig":"MEUCIQDsJRln8B1tSqK4a/KVk/4r5AockQUvu8x+RR7GLqGcoQIgFXZkhZnpWKORQLkXdm72DFgGpE1F3nuJv1b+nY0dPeY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":17442,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiDGumCRA9TVsSAnZWagAAsEQQAIxWky7oaNMVk/xP4Czj\niPD6/5aqMUG9ekoSVF3dx6TP7HycMZbPRkB2fjgDFyb7Mzy5qk//8x8hY2sl\nHQEX3g13htDRGIDGv81d2PkJ5Unchzejl9/4Pa7y1aZJYFReBXflP54u3hw9\nlQU0wXoC86em+/pGW/bTNymxFuJlZTbPI9eHCn6GkWtmezsFe7+qKh12sPKE\nF85BTqNiQ/T/8c/JwhNk373Y4LV7wpQq8hp4kjkYiet9Q1QTLAEj9qzW0orU\n3oxIYDfGOGdAJiMlS8vMzEILpKt21T/hwnGt7PkUQ+Ns1n8aiLiRwsODWovC\nrTpXGQT/4Sr9oB++ts6piF/QlF2JaQV9S8gOnHjBuc0T08XpdoYAjqIEXE4C\ntvptW68TE4KcLF0qkfTkawkWVWk396Yj3KELzZPQn9jkWdT0f/cEqTy70s9R\nquFmDWDorwQfR3jVoBypCR1tI15paRtZMSbbbDg1aXtmxYTtax8YhK6x49QC\nWrC9tDYkY3qr6jx7IsuUKJ/CVk6SEFcKwVEEDgCvyli33JdrHlQyByyPAwye\nC4ZB50wyjMwGFr0s92DqHwEIFFCMHnG8YHk5g8DokRkP2PsKIQIXvaVpUgni\nhLA4Tks1sP+R2ehxM9E4pOZn9h41feggSOZda/pUnHE6Th/9gvy8GmpH8uSJ\nZh24\r\n=4zRN\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"preset":"jest-preset-preact","collectCoverage":true,"coverageThreshold":{"global":{"lines":25,"branches":50,"functions":10,"statements":25}},"collectCoverageFrom":["./src/**"]},"babel":{"plugins":[["@babel/plugin-transform-react-jsx",{"pragma":"h","pragmaFrag":"Fragment"}],"babel-plugin-styled-components"],"presets":["@babel/env",["@babel/typescript",{"jsxPragma":"h"}]]},"private":false,"scripts":{"test":"jest ./tests","build":"webpack build","start":"webpack server --open"},"_npmUser":{"name":"mvanlonden","email":"melvanlonden@gmail.com"},"prettier":{"semi":false,"arrowParens":"avoid","singleQuote":true},"description":"## CDN Installation","directories":{},"dependencies":{"preact":"^10.6.5","styled-components":"^5.3.3","@canvas-medical/embed-common":"^0.0.7"},"eslintConfig":{"extends":["preact","prettier"]},"_hasShrinkwrap":false,"devDependencies":{"jest":"^27.5.1","eslint":"^8.9.0","webpack":"^5.68.0","prettier":"^2.5.1","ts-loader":"^9.2.6","css-loader":"^6.6.0","typescript":"^4.5.5","@babel/core":"^7.17.2","webpack-cli":"^4.9.2","@babel/preset-env":"^7.16.11","jest-preset-preact":"^4.0.5","webpack-dev-server":"^4.7.4","@babel/preset-react":"^7.16.7","babel-preset-preact":"^2.0.0","html-webpack-plugin":"^5.5.0","eslint-plugin-prettier":"^4.0.0","@testing-library/preact":"^2.0.1","preact-render-to-string":"^5.1.19","@babel/preset-typescript":"^7.16.7","@testing-library/jest-dom":"^5.16.2","babel-plugin-styled-components":"^2.0.2","@babel/plugin-transform-react-jsx":"^7.16.7","@nick.telsan/eslint-config-preact":"^1.3.1"},"_npmOperationalInternal":{"tmp":"tmp/embed-appointments_0.0.7_1644981158594_0.4803359389863564","host":"s3://npm-registry-packages"}},"0.0.8":{"name":"@canvas-medical/embed-appointments","version":"0.0.8","license":"MIT","_id":"@canvas-medical/embed-appointments@0.0.8","maintainers":[{"name":"tboyles-cm","email":"thomas.boyles@canvasmedical.com"},{"name":"mvanlonden","email":"melvanlonden@gmail.com"},{"name":"beaugunderson","email":"beau@beaugunderson.com"},{"name":"eabruzzese","email":"eric.abruzzese@gmail.com"}],"dist":{"shasum":"10d21e0b579deb154222ff80e7d4af6ca43eea7d","tarball":"https://registry.npmjs.org/@canvas-medical/embed-appointments/-/embed-appointments-0.0.8.tgz","fileCount":6,"integrity":"sha512-XHS68cb+R6RREz+hapdrX3ZWxfQiMLjPMvApiWgGNDDMYM+gPxJqjLekLWIWQcJdHFxvM9u8ommM8U5kK1Z16Q==","signatures":[{"sig":"MEYCIQCzrCQKekN5f78WafDjAJu1eYEXjN/s41AdgRJ99v5anAIhALLxdBrrzr9r2RsS2mdxdHjGAjBK4mUGW6O8RPLtay+K","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":143270,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiD844ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrVOA//XL/FbOgH6DIW0DCBmD9fkc+4EtQ8xT0UiEkhe3iljxywpCB/\r\nTAaUjxaL8m44okKleLIr91fG6rCIijnQI2YL+0stvRDiFW299u/WB1phpkl4\r\njrwjNV1PCkQMuq9MY+83hjfY0nfXkVSOItQ4/OsaylEO0OFei/lePcuE3iWE\r\nxkadNWMJltExfzbhw2Su55qSHaFcyYJHyQeWdLZBZ4kjKAFpiyduajmzFwE2\r\n2pcDb5aFfYiiOPoqckA2bB0B0qtLlIxBuuLwDH3sxSVRvV0+tF5tkp8oTDcr\r\nZz/FiT29zsp/LxeRXvVsSbpF6Yj4ywj2Vrsuk+c4hvBJ7KU9OdfRMQ95EQeN\r\nSnvEFsXtTqA9HJxlhONMlAk04/xOJkJr+PHUQYgdKGaEdNKb38/CSS/tR8uW\r\nv9yx8lT8AWn7sUXZVdDz7tU5pKYoMIQmM+rFOoVxWdI4Oi0A7gcL119cEzoT\r\nxxlUtJj1T/kViFr1dRcJPWvkfu5YIOAVx4fVEqzLlDllFW7ABmaOCLf+VfF1\r\nGO+XzEN9u+mkNWceX7ojxXjKAG4H1jtBXTiEE+4g8PwD9nIikFMrUe8uJyv0\r\nJjBTzP9Vauc2F3ufuQX5WmcnIf5IPBrFQZG/wvFw2kTLzYJaFYcDbsOak0Ky\r\nILstMCaJOw0OriVXz7mQ8oj6CmlA0/rnz4I=\r\n=/Yxn\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"preset":"jest-preset-preact","collectCoverage":true,"coverageThreshold":{"global":{"lines":25,"branches":0,"functions":10,"statements":25}},"setupFilesAfterEnv":["./tests/setup.ts"],"collectCoverageFrom":["./src/**"]},"main":"dist/appointments.js","babel":{"plugins":[["@babel/plugin-transform-react-jsx",{"pragma":"h","pragmaFrag":"Fragment"}],"babel-plugin-styled-components"],"presets":["@babel/env",["@babel/typescript",{"jsxPragma":"h"}]]},"private":false,"scripts":{"test":"TZ=UTC jest ./tests","build":"webpack build --env prod","start":"webpack server --open","build:esm":"webpack build --env prod --env esm","test:update":"yarn test --updateSnapshot"},"_npmUser":{"name":"mvanlonden","email":"melvanlonden@gmail.com"},"prettier":{"semi":false,"arrowParens":"avoid","singleQuote":true},"description":"## CDN Installation","directories":{},"dependencies":{"preact":"^10.6.5","styled-components":"^5.3.3","@canvas-medical/embed-common":"^0.0.8"},"eslintConfig":{"extends":["preact","prettier"]},"_hasShrinkwrap":false,"devDependencies":{"jest":"^27.5.1","eslint":"^8.9.0","webpack":"^5.68.0","prettier":"^2.5.1","ts-loader":"^9.2.6","css-loader":"^6.6.0","typescript":"^4.5.5","@babel/core":"^7.17.2","webpack-cli":"^4.9.2","@babel/preset-env":"^7.16.11","jest-preset-preact":"^4.0.5","webpack-dev-server":"^4.7.4","@babel/preset-react":"^7.16.7","babel-preset-preact":"^2.0.0","html-webpack-plugin":"^5.5.0","eslint-plugin-prettier":"^4.0.0","@testing-library/preact":"^2.0.1","preact-render-to-string":"^5.1.19","@babel/preset-typescript":"^7.16.7","@testing-library/jest-dom":"^5.16.2","babel-plugin-styled-components":"^2.0.2","@babel/plugin-transform-react-jsx":"^7.16.7","@nick.telsan/eslint-config-preact":"^1.3.1"},"_npmOperationalInternal":{"tmp":"tmp/embed-appointments_0.0.8_1645203000769_0.9257591481327188","host":"s3://npm-registry-packages"}},"0.0.9":{"name":"@canvas-medical/embed-appointments","version":"0.0.9","license":"MIT","_id":"@canvas-medical/embed-appointments@0.0.9","maintainers":[{"name":"tboyles-cm","email":"thomas.boyles@canvasmedical.com"},{"name":"mvanlonden","email":"melvanlonden@gmail.com"},{"name":"beaugunderson","email":"beau@beaugunderson.com"},{"name":"eabruzzese","email":"eric.abruzzese@gmail.com"}],"dist":{"shasum":"82ffb8e7fc3852924386f5af987aede1f7cd847d","tarball":"https://registry.npmjs.org/@canvas-medical/embed-appointments/-/embed-appointments-0.0.9.tgz","fileCount":6,"integrity":"sha512-rArGmVVvf9lJk6ut8bwbdj3OscCMRlpjmQueR7Jj7lHSp1nQaGxtY+UQ2bW0uIFVrJLEbVn9eXG6sMwtteKx2Q==","signatures":[{"sig":"MEUCIF7ByrvRNSxLUFn8HpYI+tlGCWlsc07dUzJZ0UZS1CmBAiEAh+1aOt++Advw+AMlYubqqhig7lsVG0H9sncrNiMSMWg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":146560,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiF81BACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqdsA//Qo5osZBAciNfIQfFX3PA+RWZCRlv+7xxky788FEYP9yCfLgI\r\nmgR691s0uhbGh7xYyAkB02AQ77q3UlswSPrRU731X6g7fp733iP8i9QAIE68\r\nqgwdUsdFpQAQwI/MHxTL+S18o8VGhWhiGIZXDuSmV/3HJXOIPh7sPk2D/DoQ\r\nMokMX8/hR41fzK3fT2XhOPicCetZnZhFBxqlVCLqvMBx0ezni0k0dxgDe89C\r\nZr9cjM0R1H7zMjonuStED8hFu4mTJqnMvy5UD3ytMDDDcgXWKKdDbWwlCrHo\r\nS/+NV9Y+xEGY360ow0lf6RrnsDRmMUw6IgX7uOjRoRQp29qaZ5UttWOSZVYz\r\n8U6//5b5Yv36hYC47db24yde6HfpfCiqS2NUbClMSp8twNADJiYAp4XM8rsu\r\nJm/Zh9QrTEoClKST1DuF3sPSYQNVxb+KArHIPfHUHuLE9RvFaGVZoG+aGy4Y\r\nLBpThIjHJ83iMSbSIAf3PTZTL628/i1Zouhr/ehVh08rPdveyHUO/n+AOAnw\r\nWWUvVawdV3kwNm60hhClQyZy/cXPkty5f6UU/yh6HxVu1o6uYllCoNnSlCNW\r\nYm1ubTr+HLTJuXsExt/tG5N3GCiC28sjvE3ijsoZBN1Jy8wDHUhC0dKg/cNz\r\nED1OqeRuC+x6YITcxw1WiRZK+LV9DOHa0Pc=\r\n=bHtt\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"preset":"jest-preset-preact","collectCoverage":true,"coverageThreshold":{"global":{"lines":25,"branches":0,"functions":10,"statements":25}},"setupFilesAfterEnv":["./tests/setup.ts"],"collectCoverageFrom":["./src/**"]},"main":"dist/appointments.js","babel":{"plugins":[["@babel/plugin-transform-react-jsx",{"pragma":"h","pragmaFrag":"Fragment"}],"babel-plugin-styled-components"],"presets":["@babel/env",["@babel/typescript",{"jsxPragma":"h"}]]},"private":false,"scripts":{"test":"TZ=UTC jest ./tests","build":"webpack build --env prod","start":"webpack server --open","build:esm":"webpack build --env prod --env esm","test:update":"yarn test --updateSnapshot"},"_npmUser":{"name":"mvanlonden","email":"melvanlonden@gmail.com"},"prettier":{"semi":false,"arrowParens":"avoid","singleQuote":true},"description":"## CDN Installation","directories":{},"dependencies":{"preact":"^10.6.5","styled-components":"^5.3.3","@canvas-medical/embed-common":"^0.0.9"},"eslintConfig":{"extends":["preact","prettier"]},"_hasShrinkwrap":false,"devDependencies":{"jest":"^27.5.1","eslint":"^8.9.0","webpack":"^5.68.0","prettier":"^2.5.1","ts-loader":"^9.2.6","css-loader":"^6.6.0","typescript":"^4.5.5","@babel/core":"^7.17.2","webpack-cli":"^4.9.2","@babel/preset-env":"^7.16.11","jest-preset-preact":"^4.0.5","webpack-dev-server":"^4.7.4","@babel/preset-react":"^7.16.7","babel-preset-preact":"^2.0.0","html-webpack-plugin":"^5.5.0","eslint-plugin-prettier":"^4.0.0","@testing-library/preact":"^2.0.1","preact-render-to-string":"^5.1.19","@babel/preset-typescript":"^7.16.7","@testing-library/jest-dom":"^5.16.2","babel-plugin-styled-components":"^2.0.2","@babel/plugin-transform-react-jsx":"^7.16.7","@nick.telsan/eslint-config-preact":"^1.3.1"},"_npmOperationalInternal":{"tmp":"tmp/embed-appointments_0.0.9_1645727041590_0.587561555385087","host":"s3://npm-registry-packages"}}},"time":{"created":"2022-02-16T03:12:38.533Z","modified":"2026-03-03T01:47:15.368Z","0.0.7":"2022-02-16T03:12:38.784Z","0.0.8":"2022-02-18T16:50:00.938Z","0.0.9":"2022-02-24T18:24:01.750Z"},"license":"MIT","description":"## CDN Installation","maintainers":[{"email":"beau@beaugunderson.com","name":"beaugunderson"}],"readme":"# Canvas - Embed Appointments\n\n## CDN Installation\n\n- Add a host container\n\n```\n<div id=\"embed-root\"></div>\n```\n\n- Add CDN Link to your application\n\n```\n<script src=\"https://d2nowqpv63va0r.cloudfront.net/appointments.js\" type=\"text/javascript\"></script>\n```\n\n- Add a script tag to initialize application\n\n```\n<script type=\"text/javascript\">\n  Appointments.init({\n    api: https://your.api.url,\n    bailoutURL: https://your.host.site,  // Return user here if they exit early\n    locationId: 'someID',\n    patientId: 'someID',\n    patientKey: 'someKey',\n    rootId: 'embed-root',  // The id of your host container\n    brandColor: '#000000',  // Your custom brand color in hex code\n    accentColor: '#000000,  // Your custom accent color in hex code\n    fontFamily: \"'my font', serif\",  // Your custom font. See below.\n  })\n</script>\n```\n\n## NPM Installation\n\n### Install with prefered package manager\n\n```\n  npm i @canvas-medical/embed-appointments --save\n```\n\n```\n  yarn add @canvas-medical/embed-appointments\n```\n\n### Initialize embeds\n\n- Add a host container\n\n```\n<div id=\"embed-root\"></div>\n```\n\n- Import the initializer\n\n```\n\nimport { init } from '@canvas-medical/embed-appointments'\n\n```\n\n- Call the initializer and supply it some config\n\n```\n  init({\n    api: https://your.api.url,\n    bailoutURL: 'https://your.host.site',  // Return user here if they exit early\n    locationId: 'someID',\n    patientId: 'someID',\n    patientKey: 'someKey',\n    rootId: 'embed-root',  // The id of your host container\n    brandColor: '#000000',  // Your custom brand color in hex code\n    accentColor: '#000000,  // Your custom accent color in hex code\n    fontFamily: \"'my font', serif\",  // Your custom font. See below.\n  })\n```\n\n# Important Note About Fonts\n\nThese embeds rely on the shadow DOM to encapsulate their styles from the host application's styles. As a result, you need to do a bit of extra work to get custom fonts working.\n\nTo add your font, either link it in your document head or add an `@import` statement to your document's CSS or a style tag.\n\nThe embed uses 400 and 700 weights, so make sure your font import includes at least both of those.\n\nLink Example\n\n```\n  <head>\n    <meta charset=\"utf-8\" />\n    <title>My Application</title>\n    <meta name=\"viewport\" content=\"width=device-width,initial-scale=1\" />\n    <style>\n      body {\n        margin: 0;\n        overflow: hidden;\n      }\n    </style>\n    <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n    <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n    <link href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap\" rel=\"stylesheet\">\n  </head>\n```\n\nImport Example\n\n```\n  <head>\n    <meta charset=\"utf-8\" />\n    <title>My Application</title>\n    <meta name=\"viewport\" content=\"width=device-width,initial-scale=1\" />\n    <style>\n      @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');\n\n      body {\n        margin: 0;\n        overflow: hidden;\n      }\n    </style>\n  </head>\n```\n\nOnce you have imported your font, you can provide its name to the `customFont` parameter in the initializer.\n\nWe recommend using [Roboto](https://fonts.google.com/specimen/Roboto) as your default font. If you use Roboto, you don't need to provide a `customFont` parameter to the initializer.\n\n## React Example\n\n```\nimport React, { useEffect } from 'react'\nimport { init } from '@canvas-medical/embed-appointments'\n\nexport const Appointments = (props) => {\n  useEffect(() => {\n    init({\n      api: https://your.api.url,\n      bailoutURL: 'https://your.host.site',  // Return user here if they exit early\n      locationId: 'someID',\n      patientId: 'someID',\n      patientKey: 'someKey',\n      rootId: 'embed-root',  // The id of your host container\n      brandColor: '#000000',  // Your custom brand color in hex code\n      accentColor: '#000000,  // Your custom accent color in hex code\n    })\n  }, [])\n\n  return (\n    <div id=\"embed-root\" />\n  )\n}\n```\n","readmeFilename":"README.md"}