Document Tree
Document Properties
Kbid
3135D5
Last Modified
28-Mar-2025
Added to KB
25-Feb-2025
Public Access
Everyone
Status
Online
Doc Type
Guidelines
Product
Intershop Progressive Web App
Guide - Intershop Progressive Web App - Intershop Copilot for Buyers

The Intershop PWA provides an integration with Intershop Copilot for Buyers.

Official Intershop Documentation: Intershop Copilot - AI Purchase and Service Assistant

The Intershop Copilot system consists of:

  • PWA extension - logic to connect with the Copilot backend service and execute the copilotUIFile
  • Copilot UI file - web.js file that contains the popup
  • Copilot backend service - low-code tool that hosts the chatflow with additional services and connections

The Intershop Copilot embedded chatbot implementation is available in its dedicated GitHub repository.
It is a customized fork of FlowiseChatEmbed.

Configuration

For the integration of the Intershop Copilot for Buyers, the feature toggle copilot needs to be enabled in the PWA configuration.
Additionally, a project- or deployment-specific configuration is needed that provides the following values:

  • copilotUIFile - URL to the Javascript file that contains the compiled version of the Intershop Copilot embedded chatbot
  • chatflowid - project-specific ID
  • apiHost- URL to the specific Flowise REST API

Example via environment.ts file:

features: ['copilot'],
copilot: {
  copilotUIFile: 'https://cdn.jsdelivr.net/gh/intershop/ai-flowise-chat-embed@website/demo-store/dist/web.js',
  chatflowid: '431cecbc-47fe-4e20-b37e-b4ba0ceedff9',
  apiHost: 'https://ish-flowise-app.azurewebsites.net',
},

Example via docker-compose.yml configuration:

pwa:
  environment:
    FEATURES: |
      - copilot
    COPILOT: |
      copilotUIFile: "https://cdn.jsdelivr.net/gh/intershop/ai-flowise-chat-embed@website/demo-store/dist/web.js"
      chatflowid: "431cecbc-47fe-4e20-b37e-b4ba0ceedff9"
      apiHost: "https://ish-flowise-app.azurewebsites.net"

Example via PWA Helm Chart:

environment:
  - name: FEATURES
    value: copilot
  - name: COPILOT
    value: |
      {
        "copilotUIFile": "https://cdn.jsdelivr.net/gh/intershop/ai-flowise-chat-embed@website/demo-store/dist/web.js",
        "chatflowid": "431cecbc-47fe-4e20-b37e-b4ba0ceedff9",
        "apiHost": "https://ish-flowise-app.azurewebsites.net"
      }

Additional chatflowConfig Variables

Additional chatflowConfig variables can be provided via deployment configuration as well if needed and will be handled by the chatbot implementation.
These variables extend the currently provided defaults (restEndpoint, currentLocale).

Example via docker-compose.yml configuration:

pwa:
  environment:
    COPILOT: |
      ...
      chatflowConfig: { "vars": { "foo": "bar", "hello": "world" } }

Example via PWA Helm Chart:

environment:
  - name: COPILOT
    value: |
      {
        ...
        "chatflowConfig": { "vars": { "foo": "bar", "hello": "world" } }
      }

Customize Chatbot

Besides the mandatory configuration, you can also use additional chatbot theme configuration provided through deployment configuration that overwrites the current default configuration from the copilot.component.ts.
The available options can be found in the appropriate version of the chatbot implementation.

Example via docker-compose.yml configuration:

pwa:
  environment:
    COPILOT: |
      ...
      theme: { "chatWindow": { "title": "Assistant Title" }, "button": { "backgroundColor": "purple", "size": 60 }, "tooltip": { "showTooltip": true } }

Example via PWA Helm Chart:

environment:
  - name: COPILOT
    value: |
      {
        ...
        "theme": { "chatWindow": { "title": "Assistant Title" }, "button": { "backgroundColor": "purple", "size": 60 }, "tooltip": { "showTooltip": true } }
      }

Override Chatbot Styling

The chatbot theme configuration provides an option to override the default styling via customCSS in the copilot.component.ts.

// Add custom CSS styles.
Use !important to override default styles
customCSS: `
  .chatbot-container {
    font-family: 'robotoregular' !important;
  }
  input, textarea {
    font-family: 'robotoregular' !important;
  }
`,

handleToolCall Actions

Tool calls like openBasket are triggered by the Copilot backend service and can be detected in the PWA.
The handleToolCall method handles these actions and the parameters given by the Intershop Copilot for Buyers.
A new method in the Copilot backend service that is meant to control something inside the PWA needs a new handler in this function.

The handler currently checks only the last tool call.
So, for example, the user asked for a laptop, and the Intershop Copilot for Buyers first runs the search and then the openProduct tool.
In that case, only the openProduct tool is handled.

Refer to the handleToolCall method of the copilot.component.ts and ensure that any functionalities that depend on certain feature toggles are enabled in the PWA configuration as well, e.g., compare in the current implementation.

Disclaimer
The information provided in the Knowledge Base may not be applicable to all systems and situations. Intershop Communications will not be liable to any party for any direct or indirect damages resulting from the use of the Customer Support section of the Intershop Corporate Web site, including, without limitation, any lost profits, business interruption, loss of programs or other data on your information handling system.
The Intershop Knowledge Portal uses only technically necessary cookies. We do not track visitors or have visitors tracked by 3rd parties. Please find further information on privacy in the Intershop Privacy Policy and Legal Notice.
Home
Knowledge Base
Product Releases
Log on to continue
This Knowledge Base document is reserved for registered customers.
Log on with your Intershop Entra ID to continue.
Write an email to supportadmin@intershop.de if you experience login issues,
or if you want to register as customer.