create samTemplate Lex V2 interactive msg lambda hook

[spenlep-amzn]

Description

Adding a new SAM template for chat interactive messages w/ Lex V2 support. The current template only supports Lex V1

I copy/pasted the existing template and made minor refactors to support Lex V2 (mainly interactive-messaging-lex-codehook/app.js). Since we don't have a blog post for this setup, I added detailed instructions to the README (preview it here).

Background

Customers that use Amazon Connect chat (both Hosted Widget and Customer builder) want to enhance the chat experience with interactive messages and Lex bots. To configure this, they need to integrate a lambda code-hook to handle dynamic conversations (e.g. "help", "talk to agent", "view flight plans").

They can one-click deploy this AWS Lamba and follow instructions to configure interactive messages. They will add this to an Amazon Lex V2 bot and a chat-based Amazon Connect contact flow.

We already have a sample and blog article for Amazon Lex V1, but that will reach end of life on September 15, 2025. We want to support onboarding customers using Amazon Lex V2 (around since Jan 22, 2021)

Testing

Everything has been deployed+tested (on 4/7/2025)

Checklist

• Publish the samTemplate repository to internal S3 bucket (repo link
• Deploy & test lambda (on 4/7/2025)
• Add comment here: https://stackoverflow.com/questions/78545435/set-up-interactive-messages-for-amazon-connect-chatbot-from-amozon-lex-v2
• Add example to documentation? https://docs.aws.amazon.com/connect/latest/adminguide/interactive-messages.html#carousel-template

Links

• [New] Lex v2 blog: doesn't exist (yet?) :(
• [New] Lex V2 workshop: https://catalog.us-east-1.prod.workshops.aws/workshops/638d00f5-2248-488f-b7ca-903e8b966bf8/en-US
• [New] Lex v2 template: https://serverlessrepo.aws.amazon.com/applications/us-west-2/533267401313/amazon-connect-interactive-messages-example-lex-v2
• [Old] Lex v1 blog: https://aws.amazon.com/blogs/contact-center/easily-set-up-interactive-messages-for-your-amazon-connect-chatbot/
• [Old] lex v1 template: https://serverlessrepo.aws.amazon.com/applications/us-west-2/533267401313/amazon-connect-interactive-messages-example-lex-v1

[spenlep-amzn]

Notes: adding a new path

1. Update the lambda (see lambda.diff) and deploy
2. Update the slot types

• Navigate to Lex > Bots > Bot: Interactiv... > Versions > Version: DRAFT > All languages > Language: English (US) > Slot types > Slot type: InteractiveOption
• Add value "View flight options" (matching TEST_INTERACTIVE_OPTIONS.MY_PICKER_NAME)

3. Update the intent

• Navigate to Lex > Bots > Bot: Interactiv... > Versions > Version: DRAFT > All languages > Language: English (US) > Slot types
• Add slot type "Blank type", named "FlightOptions", add values matching TEST_INTERACTIVE_OPTIONS_TEMPLATES.MY_TEMPLATE.content.elements

3. Navigate to Lex > Bots > Bot: Interactiv... > Versions > Version: DRAFT > All languages > Language: English (US) > Intents > InteractiveMessageIntent
4. Add slot { name: 'flightOptions', slotType: FlightOptoins, prompt: 'View our popular destinations' }
5. Save intent, build & test

// lambda.diff
index dec63fe..7a7b60f 100644
--- a/samTemplates/amazon-connect-interactive-messages-example-lex-v2/interactive-messaging-lex-codehook/constants/interactive_options.js
+++ b/samTemplates/amazon-connect-interactive-messages-example-lex-v2/interactive-messaging-lex-codehook/constants/interactive_options.js
@@ -2,9 +2,8 @@
 const TEMPLATE_TYPES = {
   LISTPICKER: "ListPicker",
   TIMEPICKER: "TimePicker",
+  QUICK_REPLY: "QuickReply",
+  CAROUSEL: "Carousel",
 };
 
 /*IMAGES USED FOR INTERACTIVE MESSAGES*/
@@ -31,6 +30,8 @@ const SLOTS = {
   ACTION: "action",
   INTERACTIVE_OPTION: "interactiveOption",
   DEPARTMENT: "department",
+  QUICK_REPLY: "quickReply",
+  FLIGHT_OPTIONS_CAROUSEL: "flightOptions",
   APPOINTMENT: "appointment"
 };
 
@@ -52,6 +53,8 @@ const ACTIONS = {
 /*SELF-SERVICE OPTIONS WHEN USER SELECTS "CHECK SELF-SERVICE OPTIONS" AS AN ACTION*/
 const TEST_INTERACTIVE_OPTIONS = {
   DEPARTMENT_WITH_MULTIPLE_IMAGES: "Choose a department",
+  SIMPLE_QUICK_REPLY_PICKER: "Rate my experience",
+  FLIGHT_OPTIONS_CAROUSEL_PICKER: "View flight options",
   SIMPLE_TIMEPICKER: "Schedule a meeting with an agent"
 };
 
@@ -59,6 +62,8 @@ const TEST_INTERACTIVE_OPTIONS = {
 /*MAPPING SELF-SERVICE OPTIONS TO AMAZON LEX BOT SLOTS*/
 const TEST_INTERACTIVE_OPTIONS_SLOTS = {
   DEPARTMENT_WITH_MULTIPLE_IMAGES: SLOTS.DEPARTMENT,
+  SIMPLE_QUICK_REPLY_PICKER: SLOTS.QUICK_REPLY,
+  FLIGHT_OPTIONS_CAROUSEL_PICKER: SLOTS.FLIGHT_OPTIONS_CAROUSEL,
   SIMPLE_TIMEPICKER: SLOTS.APPOINTMENT,
   INVALID: SLOTS.DEPARTMENT,
   DEPARTMENT_LISTPICKER: SLOTS.DEPARTMENT
@@ -147,6 +152,83 @@ const TEST_INTERACTIVE_OPTIONS_TEMPLATES = {
       },
     },
   },
+  SIMPLE_QUICK_REPLY_PICKER: {
+    templateType: TEMPLATE_TYPES.QUICK_REPLY,
+    version: "1.0",
+    data: {
+      content: {
+        title: "How was your experience?",
+        subtitle: "Tap to select option",
+        buttons: [
+          {
+            text: "Good",
+          },
+          {
+            text: "Bad",
+          },
+          {
+            text: "Neutral",
+          },
+        ],
+      },
+    },
+  },
+  FLIGHT_OPTIONS_CAROUSEL_PICKER: {
+    "templateType": "Carousel",
+    "version": "1.0",
+    "data": {
+      "content": {
+        "title": "View our popular destinations",
+        "elements": [
+          {
+            "templateIdentifier": "template0",
+            "templateType": "Panel",
+            "version": "1.0",
+            "data": {
+              "content": {
+                "title": "California",
+                "subtitle": "Tap to select option",
+                "elements": [
+                  {
+                    "title": "Book flights"
+                  },
+                  {
+                    "title": "Book hotels"
+                  },
+                  {
+                    "title": "Talk to agent"
+                  }
+                ]
+              }
+            }
+          },
+          {
+            "templateIdentifier": "template1",
+            "templateType": "Panel",
+            "version": "1.0",
+            "data": {
+              "content": {
+                "title": "New York",
+                "subtitle": "Tap to select option",
+                "elements": [
+                  {
+                    "title": "Book flights"
+                  },
+                  {
+                    "title": "Book hotels"
+                  },
+                  {
+                    "title": "Talk to agent"
+                  }
+                ]
+              }
+            }
+          }
+        ]
+      }
+    }
+  }
 };