'Amazon Connect CCP not displaying in HTML iframe

I have created a NodeJS app that serves index.html page and index.html contains an iframe with Amazon Connect CCP link.

The code looks like this:

app.js

const PORT = process.env.PORT || 3000;

const express = require("express");
const path = require("path");

const app = express();

app.get("/", function (req, res) {
  res.sendFile(path.join(__dirname, "/index.html"));
});

app.listen(PORT, () => {
  console.log("Server is up on port 3000");
});

index.html

<body>
    <iframe
      src="https://<<instanceName>>.my.connect.aws/ccp-v2/chat"
      width="1000"
      height="800"
    ></iframe>
  </body>

The NodeJS app is deployed on Heroku and on HTTPs but when I run the heroku app, it gives the following error:

Refused to display 'https://<<instanceName>>.awsapps.com/' in a frame because it set 'X-Frame-Options' to 'sameorigin'.

enter image description here

I have also added the heroku origin in Approved Origins:

enter image description here

What am I missing here? Can anyone please help?

Thanks

node.jsiframex-frame-optionsamazon-connect


Solution 1:[1]

Follow these Steps:

  1. Log in to the AWS Management Console using your AWS account.

  2. Navigate to the Amazon Connect console.

  3. Check that you're in the correct Region for your Amazon Connect instance. Choose your instance.

  4. See this Image

  5. Choose Application integration, and then choose Add origin.

  6. See this Image

  7. Enter your domain URL. All domains that embed the CCP for a particular instance to be explicitly added. (Works with localhost:3000 format too)

Note: Using embeded CCP in frame requires same aws-region (e.g us-east-1) as where your connect-instance currently running.

Also remove "/chat" from your instance URL

This solved my issue, I hope it would yours too.

Solution 2:[2]

I had a very similar issue. I resolved it by enabling 3rd party cookies for the page in the browser and correcting the domain, making sure the instance Access Url domain and the CCP iframe domain match (do not iframe .awsapps.com if the access url is on .my.connect.aws).

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Hassan Raza
Solution 2

Related Questions