@mhq-services/arztcloud-service-integration-notruf

arztcloud service integration 'Notruf'

This package offers a way to integrate the arztcloud emergency call service on your own website. With this package the emergency call service will be opened in an iframe placed in a modal. See https://arztcloud.com for a live preview (click on the phone button to open the modal). This package contains the button as well as the modal with the iframe.

To be able to use this feature on your website you require a charged token from arztcloud! Otherwise the site won't be shown in the iframe.

Using this component

Integration

Script tag

Put a script tag similar to this <script src='https://unpkg.com/@mhq-services/arztcloud-service-integration-notruf@1.0/dist/arztcloud-service-integration-notruf/arztcloud-service-integration-notruf.js'></script> in the head of your index.html
Then you can use the element anywhere in your template, JSX, html etc

Node Modules

Run npm install @mhq-services/arztcloud-service-integration-notruf --save
Put a script tag similar to this <script src='node_modules/mhq-services/arztcloud-service-integration-notruf/dist/arztcloud-service-integration-notruf/arztcloud-service-integration-notruf.js'></script> in the head of your index.html
Then you can use the element anywhere in your template, JSX, html etc

Components

Place the button with

<ac-notruf-button></ac-notruf-button>

and the modal with

<ac-notruf-modal src="#your-personal-arztcloud-service-integration-notruf-link"></ac-notruf-modal>

Customization

Button

Set the stroke width of the default icon with stroke-width (values 0 to 1 correspond 0% to 100% of the default stroke).

Set the buttons attribute default to false to be able to replace the image/content of the button (see example index.html below).

Finally you can simply style the button to e.g. change the (hover) color of the button to match with your websites colour scheme.

button.ac-notruf-button {
  font-size: 2.5em;
  color: red;
}
button.ac-notruf-button:hover {
  color: green;
}
button.ac-notruf-button:focus {
  outline: none;
}

Development

Getting Started

To install dependencies, run:

npm install

To start a test create an index.html in the src folder (example below) and run:

npm start

To build the component for production, run:

npm run build

To run the unit tests for the components, run:

npm test

Example index.html

To test some variations you can copy this snippet to src/index.html.

Since the ac-notruf-modal requires a custom link for the provided service (see attribute src), we decided to ignore the index.html file to avoid negligent exposure of user data by commits.

<!DOCTYPE html>
<html dir="ltr" lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0">
    <title>arztcloud Notruf Service Integration</title>

    <script type="module" src="/build/arztcloud-service-integration-notruf.esm.js"></script>
    <script nomodule src="/build/arztcloud-service-integration-notruf.js"></script>

  </head>
  <body style="font-size: 2em;">
    <ac-notruf-button></ac-notruf-button>

    <ac-notruf-button stroke-width="0.5"></ac-notruf-button>

    <ac-notruf-button default="false" hint="Inserting svg manually">
      <svg xmlns="http://www.w3.org/2000/svg"
          width="122.88pt"
          height="122.88pt"
          viewBox="0 0 122.88 122.88">
      <defs/>
        <path id="shape021" transform="matrix(0.68350198157 -0.62877483791 -0.62877483791 -0.68350198157 45.136263922 108.17101304)" fill="currentColor" stroke="currentColor" stroke-width="2.4000089552" stroke-linecap="round" stroke-linejoin="round" d="M24.6533 18.2009C26.479 16.1757 34.1312 12.8904 47.3855 12.1331C60.5442 11.5515 65.2533 14.7014 68.0898 16.5219C68.8841 21.4509 68.1822 22.2766 68.2946 25.7011C75.5726 32.9718 90.2492 38.462 92.2291 35.4802C94.7714 30.9937 94.7024 20.6676 87.5061 13.1733C85.3832 11.5376 76.0758 -0.250268 50.1344 0.00405487C24.1935 0.258378 11.1431 7.67136 3.39545 18.6513C-2.28511 26.5889 0.456893 35.5261 2.36729 37.6029C6.07042 39.3539 16.9834 35.8481 24.0991 28.0571C23.8566 25.66 23.5016 20.7207 24.6533 18.2009Z"/>
      </svg>
    </ac-notruf-button>

    <ac-notruf-button icon-url="http://localhost:3333/build/assets/circle-phone_icon.svg" default="false">
    </ac-notruf-button>

    <ac-notruf-modal src="#your-personal-arztcloud-service-integration-notruf-link"></ac-notruf-modal>
  </body>
</html>

Publish

Publish to NPM

arztcloud integration

@everything-registry/sub-chunk-599

5 years ago

5 years ago

5 years ago

5 years ago