Skip to content

Commit ac05de3

Browse files
committed
Add attributeMap example for loadJS
1 parent aeb882f commit ac05de3

File tree

1 file changed

+29
-10
lines changed

1 file changed

+29
-10
lines changed

source/includes/_methods.md

Lines changed: 29 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -523,36 +523,55 @@ Field Key | Example Value | Field Format | Purpose
523523

524524
When calling the insert method, the goal is to insert some markup into a location on the page. Once you have constructed the element(s) you wish to insert, you may call the `append` method to complete the process.
525525

526-
## API.loadJS(resourceUrl)
526+
## API.loadCSS(resourceUrl)
527+
528+
The loadCSS method is a simple way to include an additional CSS stylesheet file required for your integration. The method returns a JavaScript Promise that resolves when the loading is complete. You may then insert markup that depends on that styling to avoid displaying a flash of unstyled content.
527529

528530
> Usage
529531
530532
```javascript
531533
(async APILoader => {
532534
const API = await APILoader.create();
533-
// Loads a JavaScript file
534-
API.loadJS('https://www.company.com/script.js')
535+
// Loads a CSS stylesheet
536+
API.loadCSS('https://www.company.com/integration.css')
535537
.then(() => {
536-
// Code to execute after your JavaScript file has loaded.
538+
// Code to execute after your stylesheet has loaded.
537539
});
538540
})(window.DDC.APILoader);
539541
```
540542

541-
The loadJS method is a simple way to include additional JavaScript files required for your integration. The method returns a JavaScript Promise which you can use to know when file loading is complete, to then run any necessary initialization functions, etc.
543+
## API.loadJS(resourceUrl, attributeMap)
542544

543-
## API.loadCSS(resourceUrl)
545+
The loadJS method is a simple way to include additional JavaScript files required for your integration. The method returns a JavaScript Promise which you can use to know when file loading is complete, to then run any necessary initialization functions, etc.
544546

545547
> Usage
546548
547549
```javascript
548550
(async APILoader => {
549551
const API = await APILoader.create();
550-
// Loads a CSS stylesheet
551-
API.loadCSS('https://www.company.com/integration.css')
552+
// Loads a JavaScript file
553+
API.loadJS('https://www.company.com/script.js')
552554
.then(() => {
553-
// Code to execute after your stylesheet has loaded.
555+
// Code to execute after your JavaScript file has loaded.
554556
});
555557
})(window.DDC.APILoader);
556558
```
557559

558-
The loadCSS method is a simple way to include an additional CSS stylesheet file required for your integration. The method returns a JavaScript Promise which you can use to know when stylesheet loading is complete, to then insert markup that depends on that styling to avoid display a flash of unstyled content.
560+
> Usage with attributes
561+
562+
> In some cases your code may look for data attributes on the inserted script tag. In this case, you may use the following example as a guide to add the necessary attributes:
563+
564+
```javascript
565+
(async APILoader => {
566+
const API = await APILoader.create();
567+
const attributeMap = new Map([
568+
['data-license-key', 'abc123'],
569+
['id', 'myCompanyScript']
570+
]);
571+
API.loadJS('https://www.company.com/script.js', attributeMap).then(() => {
572+
// Code to execute after your JavaScript file has loaded.
573+
});
574+
})(window.DDC.APILoader);
575+
```
576+
577+
> Note that the `attributeMap` parameter is optional and may be ommitted in most cases.

0 commit comments

Comments
 (0)