1.4.2 Implement Brand Concierge on your website

1.4.2.1 Configure your website to show Brand Concierge - AEM Author

In order for Brand Concierge to appear on your website, you need to create a new custom block that needs to be added to a new page, and you’ll need to ensure that your new page is added to the navigation of your website.

You now need to configure the following things in this order:

Create new custom block

To create the new custom block, navigate to the GitHub repository that is linked to your website.

component-definition.json

Scroll down until you see the file component-definition.json and open it

Click the pencl icon to start editing the file.

Scroll down until you see the Blocks. Set your cursor under the closing bracket of the component Cards

Paste this code and enter a comma , after the block of code:

{
  "title": "BrandConcierge",
  "id": "brandconcierge",
  "plugins": {
    "xwalk": {
      "page": {
        "resourceType": "core/franklin/components/block/v1/block",
        "template": {
          "name": "BrandConcierge",
          "model": "brandconcierge"
        }
      }
    }
  }
},

Click Commit changes….

Click Commit changes.

component-models.json

Scroll down until you see the file component-models.json and click the pencil icon to start editing the file.

Scroll down until you see the last item. Set your cursor next to the closing bracket of the last component.

Enter a comma ,, then push enter and on the next line, paste this code:

{
  "id": "brandconcierge",
  "fields": []
}

Click Commit changes….

Click Commit changes.

component-filters.json

Scroll down until you see the file component-filters.json and click the pencil icon to start editing the file.

You should then see this.

Under section, enter a comma , and paste the id of your component "brandconcierge" after the current last line.

Click Commit changes….

Click Commit changes.

brandconcierge.css

When creating a block, it’s best practice to create a file for the styling of your block, and it should have the same name as your block. you should now create that file, which we will leave empty for now.

Go to the blocks folder. Then, click Add file and select Create new file.

In the text box, enter brandconcierge/brandconcierge.css. The file can remain empty for now. Click Commit changes….

Click Commit changes.

brandconcierge.js

When creating a block, it’s best practice to create a file for the javascript related to your block, and it should have the same name as your block.

Click Add file and select Create new file.

In the text box, enter brandconcierge.js. The file can remain empty for now. Click Commit changes….

export default function decorate(block) {
  block.setAttribute('id', 'brand-concierge-mount');
}

Click Commit changes.

Create new page & link new custom block

Go to https://my.cloudmanager.adobe.com. Click your Program to open it.

Next, click the 3 dots … on the Environments tab and click View Details.

You’ll then see your environment details. Click the URL of your Author environment.

You should then see your AEM Author environment. Go to Sites.

Go to CitiSignal. Click Create and select Page.

Select Page and click Next.

Enter the following values:

Click Create.

Select Open.

You should then see this.

Click in the blank area to select the section component. Then, click the plus + icon in the right menu.

You should then see your custom block shown in the list of available blocks. Click to select it.

You should then see an empy block being added to this page. This block will be loaded dynamically using the javacript libraries you’ll be adding in the next step.

Click Publish.

Click Publish again.

Your new page is now published, and can now be added to the navigation header in the next step.

Update navigation header file

In your AEM Sites overview, go to CitiSignal and check the checkbox for the file Header/nav. Click Edit.

Select the Text field in the preview screen and then click the Text field on the right side of the screen to edit it.

Create a new menu option in the nav menu with the text Brand Concierge. Then, select the text Brand Concierge and click the link icon.

Enter this for the field Path or URL /content/CitiSignal/brandconcierge.html and enter Brand Concierge for the field Title. Click Save.

You should then have this. Click Done.

You should then have this. Click Publish.

Click Publish again.

Your new page is now added to the menu.

1.4.2.2 Configure your website to show Brand Concierge - GitHub

After updating the content using your AEM Author environment, you now need to update some of the code in the GitHub repository that is used for your website.

Javascript Libraries

The following libraries are required to implement Brand Concierge on your website running on AEM CS/EDS:

Download all 3 files to your desktop.

Go to the GitHub project of your AEM CS/EDS website. Go to scripts.

Click Add file and then select Upload files.

Click Choose your files.

Select all 3 files styleConfigurations.js, alloy.js and brandconciergemain.js from your desktop and click Open.

Click Commit changes.

Update head.html

In the previous step you uploaded 3 new libraries. These libraries now need to be loaded when your website is loaded and the way to do that is to add references to these files in the file head.html.

Additionally, you also need to provide instructions in the head.html file to ensure that the libraries are loaded in the right order and in a correct way.

To do that, go to the GitHub project of your AEM CS/EDS website by clicking Code.

Scroll down a little bit. Open the file head.html.

Click the pencil icon to edit this file.

You should then see this.

Scroll down to line 43 and paste the following:

There are 2 fields in the below code that you need to update:

<script src="/scripts/styleconfigurations.js"></script>

<script>
        !function (n, o) {
      o.forEach(function (o) {
        n[o] || ((n.__alloyNS = n.__alloyNS ||
          []).push(o), n[o] = function () {
            var u = arguments; return new Promise(
              function (i, l) { n[o].q.push([i, l, u]) })
          }, n[o].q = [])
      })
    }
      (window, ["alloy"]);
    </script>


<script src="/scripts/alloy.js"></script>

<script>
    alloy("configure", {
        defaultConsent: "in",
        edgeDomain: "edge.adobedc.net",
        edgeBasePath: "ee",
        datastreamId: "XXXXX", // replace datastreamId
        orgId: "--aepImsOrgId--", // replace ims org Id
        debugEnabled: true,
        idMigrationEnabled: false,
        thirdPartyCookiesEnabled: false,
        prehidingStyle: ".personalization-container { opacity: 0 !important }",
    });

window["alloy"]("sendEvent", {
    conversation: {
        fetchConversationalExperience: true
    }
}).then(result => {
    console.log("Conversation experience fetched", result);
    window["alloy"]("bootstrapConversationalExperience", {
        selector: "#brand-concierge-mount",
        src: "/scripts/brandconciergemain.js",
        stylingConfigurations: window.styleConfiguration,
        stickySession: true // create a sticky session cookie with expiration
    })
});
</script>

Click Commit change….

Click Commit change.

You’ve now updated the required code to load the libraries on your website.

1.4.2.3 Test your configuration

You will now be able to test your changes on your website by going to main--citisignal-aem-accs--XXX.aem.page or main--citisignal-aem-accs--XXX.aem.live, after replacing XXX by your GitHub user account, which in this example is woutervangeluwe.

In this example, the full URL becomes this:
https://main--citisignal-aem-accs--woutervangeluwe.aem.page and/or https://main--citisignal-aem-accs--woutervangeluwe.aem.live.

It may take some time before all the assets are shown correctly, as they need to be published first.

You should then see this. Click Brand Concierge.

You should then see this Brand Concierge where you can enter your prompt.

Go Back to Brand Concierge

Go Back to All Modules