Install and integrate the SDK within your:
● iOS app
● JavaScript app (or website)
To install and integrate the SDK within your Android app, see the following:
1. Add apollo-runtime, apollo-gradle-plugin, kotlin-gradle-plugin and google-services dependencies into build.gradle
allprojects {
repositories {
google()
jcenter()
maven {
url 'https://jitpack.io'
}
}
}
2. Add the following dependency into your <app>/build.gradle
dependencies {
implementation 'com.healthcarelocator:client-stack-sdk:1.0.1'
}
3. Sync gradle project.
To install and integrate the SDK within your iOS app, see the following:
1. Make sure CocoaPods is installed. If not, then see following:
https://guides.cocoapods.org/using/using-cocoapods.html
2. If you do not have a Podfile to list dependencies, then type the following to create one in the Xcode project directory:
$ cd your-project-directory
$ pod init
3. To carry out operations with HealthCare Locator search screens and to support search queries to the GraphQL server implemented by HealthCare Locator, type the following to add HealthCare Locator ...
# Add the pod for HCLSDK and Apollo frameworks
pod 'HCLSDK'
4. Install the Podfile using the following command:
pod install
You can install and integrate the SDK or its API (to get data without implementing UI).
To install and integrate the SDK within your JavaScript app or website , see the following:
1. Add HealthCare Locator SDK – The library can be loaded directly from our CDN. You can also download and host it by yourself. Just append the following line of code inside your HTML template. We recommend to place it at the end of the body tag to avoid blocking the website initial rendering. For example:
```html
<body>
<script src="https://static.healthcarelocator.com/v1/hcl-sdk-web-ui/hcl-sdk.js"></script>
</body>
```
2. Initialize and display the HealthCare Locator UI. For example:
```html
<body>
<div class="wrapper">
<!-- Place you want to display the hcl-sdk element -->
<hcl-sdk id="main-instance"></hcl-sdk>
</div>
<!-- Previously loaded SDK API -->
<script>
customElements.whenDefined('hcl-sdk')
.then(function() {
const config = {
apiKey: 'YOUR_API_KEY', // To replace by a working API key
... // Other configurations
}
document.getElementById('main-instance').init(config);
})
</script>
</body>
```
To install and integrate the SDK's API to get data without implementing UI, you must append the following line of code inside your HTML template. We recommend to place it at the end of the body tag to avoid blocking the website initial rendering. For example:
```html
<body>
<script src="https://static.healthcarelocator.com/v1/hcl-sdk-api/hcl-sdk-api.js"></script>
</body>
```
To install and integrate the SDK within your React app, see the following:
1. Install the HealthCare Locator SDK package in your React app using one of the following:
● Using npm:
```
$ npm i @healthcarelocator/sdk-react
```
● Using yarn:
```
$ yarn add @healthcarelocator/sdk-react
```
2. Usage:
```jsx
import HclSdk from '@healthcarelocator/sdk-react';
const config = {
apiKey: 'YOUR_API_KEY', // To replace by a working API key
... // Other configurations
}
funtion App() {
return (
<div class="wrapper">
<HclSdk config={config} className={className} style={style} />
</div>
)
}
```
To install and integrate the SDK within your Angular app, see the following:
1. Install the HealthCare Locator SDK package in your Angular app using one of the following:
● Using npm:
```
$ npm i @healthcarelocator/sdk-angular
```
● Using yarn:
```
$ yarn add @healthcarelocator/sdk-angular
```
2. Usage:
```javascript
@Component({
selector: 'app-root',
template: `
<div class="wrapper">
<hcl-sdk-component [config]="config"></hcl-sdk-component>
</div>
`,
encapsulation: ViewEncapsulation.None,
})
export class AppRoot implements OnInit {
public config
ngOnInit(): void {
this.config = {
apiKey: 'YOUR_API_KEY', // To replace by a working API key
... // Other configurations
};
}
}
```
Next, customize the prebuilt screens of the SDK.