Document Tree
    Document Properties
    Kbid
    3135D5
    Last Modified
    22-Apr-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: Overview - Intershop Copilot for Buyers

    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 Flowise chat ID
    • apiHost- URL to the project specific Flowise API host

    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: 'xxxx-xxxx-xxxx-xxxx-xxxx',
      apiHost: 'https://<FLOWISE-API-HOST>',
    },

    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: "xxxx-xxxx-xxxx-xxxx-xxxx"
          apiHost: "https://<FLOWISE-API-HOST>"

    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": "xxxx-xxxx-xxxx-xxxx-xxxx",
            "apiHost": "https://<FLOWISE-API-HOST>"
          }

    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.