How to pass attribute from html tag to python action file?

Rasa Open Source
1

I have created custom connector and call webhook API using jquery to pass that attribute in action file of rasa. → Here is my code of index.html

<html>
<body>
    <div id="rasa-chat-widget" api-key="E7paWtyYWZ0LmNvbV96QTVhOXc5UHBiQ9e" data-websocket-url="http://localhost:5005"></div>
    <script src="https://unpkg.com/@rasahq/rasa-chat@0.1.5/dist/widget.js" type="application/javascript"></script>
</body>

<script>
    $(document).ready(function() {
            
            var api_key   = $("#rasa-chat-widget").attr('api-key');
            console.log('API KEY...',api_key);
            var attributes = {
                "get_api_key": api_key,
            };
            $.ajax({
                url: "http://localhost:5055/webhook/",
                type: "POST",
                contentType: "application/json",
                data: JSON.stringify({
                    "sender": "user",
                    "message": 'userInput',
                    "attributes": attributes
                }),
                success: function(response) {
                    console.log("Message sent successfully:", response);
                },
                error: function(error) {
                    console.error("Error sending message:", error);
                }
            });
    });
</script>

→ Here is my custom connector file code which is located on root directory of the rasa project

from rasa.core.channels.channel import InputChannel, UserMessage, OutputChannel
from sanic import Blueprint, response

class MyCustomConnector(InputChannel):
	@classmethod
	def name(cls):
		return "my_custom_connector"

	def blueprint(self, on_new_message):
		custom_webhook = Blueprint("custom_webhook", __name__)

		@custom_webhook.route("/", methods=["GET"])
		async def health(request):
			return response.json({"status": "ok"})

		@custom_webhook.route("/webhook", methods=["POST"])
		async def receive(request):
			payload = request.json
			sender_id = payload.get("sender", None)
			text = payload.get("message", None)
			attributes = payload.get("attributes", {})
			print('ATTRIBUTES....',attributes)
			out_channel = self.get_output_channel()
			if text:
            await on_new_message(
                UserMessage(text, out_channel, sender_id, input_channel=self.name(), metadata=attributes)
            )
			return response.json({"status": "message received"})

		return custom_webhook

	def get_output_channel(self) -> OutputChannel:
		return CollectingOutputChannel()

class CollectingOutputChannel(OutputChannel):
	@classmethod
	def name(cls):
		return "my_custom_connector_output"

	async def send_text_message(self, recipient_id, text, **kwargs):
		print(f"Sending message to {recipient_id}: {text}")

→ Here is my custom action code which is located on actions/action.py

# Retrieve custom attributes
        custom_attributes = tracker.latest_message.get('metadata', {})
        print('CUSTOM ATTRIBUTES...',custom_attributes)
        custom_attribute1 = custom_attributes.get("get_api_key")
        print('CUSTOM ATTRIBUTES API...',custom_attribute1)

→ Here is my credentails.yml file code

socketio:
  user_message_evt: user_uttered
  bot_message_evt: bot_uttered
  session_persistence: true
  my_custom_connector.MyCustomConnector:

→ Here is my endpoint.yml file code

action_endpoint:
  url: "http://localhost:5055/webhook"
  cors: true

This is all the code but it gives me none from custom data so what should I do ?