Come, let’s create a feedback widget for your blog or website using AWS Lambda, API Gateway, S3 and Dynamo DB. First we will see concept behind the feedback widget that we are going to create. Next we will see how the widget works. Later I will show you the steps to create one in AWS.
Concept Overview
Do you own a website or a hosted blog? If the answer is Yes, then you would have gone through a time when you need to know the feedback from the reader. The feedback collected from the reader is crucial because it gives you an insight on how your site needs improvement.
The feedback widget that we are going to build here consists a text box and submit button beneath it. That’s it. This is what your reader sees when it is added to your website. And we have one more custom page to check all the feedback collected so far. This will be private to you and will not be included in the site.
The best part is, all the services which are required here to build this widget are part of AWS Cloud itself. You don’t need to install or maintain a server.
How it works?
Assume that you have added the widget below your page or on sidebar. A text box with a button to submit the feedback will be shown to the user. When the reader inputs feedback and hits on “Submit”, the text will be sent to the AWS API Gateway service which will in-turn forwards the content to AWS Lambda service.
I will describe these services in detail when we go through the steps. Now I am giving you an overview of the working.
The AWS Lambda service pushes (stores) the content to the AWS DynamoDB. Likewise we will be collecting all the feedback from the reader who are visiting your website.
You can check out all the feedback by looking at the table data. However, it is very taking us sometime to logging into AWS and then switch to DynamoDB and then to check the table. To simplify this, we will have a private webpage (not part of your website), which will be used to checkout all the feedback which was collected so far.
Download the Feedback_Widget_Bundle.zip file. This zip file contains all the source HTML, script and test case files.
Download FileSo, let’s get it created. I hope you already have an AWS account activated and logged-in.
Step 1: Setting up DynamoDB Table
AWS DynamoDB is a NoSQL database service. The feedback which we are collecting on your website will be stored in the DynamoDB table. A NoSQL table or collection doesn’t have a structure. It stores the data in the form of documents.
Go to AWS console. Search for DynamoDB and enter into the service dashboard. Create a table called “feedback”. Set “timestamp” as primary key.
Step 2: Setting up Lambda Service
Lambda service acts as middle man here transferring data to and from the database. Give a name to the service. Choose “NodeJS” as the scripting language. Edit the index.js and replace the content with the content provided in the bundle.
Click on save and test the lambda integration.
Step 3: Uploading static files to S3
AWS S3 (Simple Storage Service) provides a way to store static files in AWS cloud. We pay for the size of the data. S3 provides a way to make a file publicly accessible. By default you can only able to view and modify the files you upload in S3 once you logged into S3 service dashboard. No one from outside will have access to see or to download the files.
When you make them public, S3 provides you a URL which can be shared with someone to see the file without your AWS console access. We will be uploading only the widget file. Then make it publicly visible. Note down the URL shown which will be used to add in iframe tag in the next step.
In the next step we will point the widget URL in the iframe HTML element on your web page where you want to embed the feedback widget.
Step 4: Adding Feedback Widget to your site
Add the below iframe to your site wherever you want the new feedback widget to be placed.
<iframe src=”https://……./feedback_widget/feedback-widget.html” width=”100%” height=”60″>
Testing your new widget
Once you are done with adding the above iframe tag to your site template or one of the page, then go to your web page and see whether the widget is appearing as expected.
Type-in some sample text in the feedback box and check whether the feedback is appearing on the database table.
Now double click and open the feedback-viewer file in the browser and check the feedback that was stored in the database. When you delete a feedback from the database, you will notice the change in the viewer page also.
How useful was this post?
Click on a star to rate it!
Average rating 2 / 5. Vote count: 3
We are sorry that this post was not useful for you!
Let us improve this post!
Thanks for your feedback!
