@bigbinary/neeto-molecules 5.1.0 → 5.1.2

package/dist/cjs/ProductEmbed.js

@@ -109,25 +109,33 @@ var parseExtraArgs$1 = function parseExtraArgs(extraArgs) {
     return "\n".concat(TAB_STRING, "  ").concat(key, ": \"").concat(value, "\"");
   });
 };
-var inlineEmbedCode$1 = function inlineEmbedCode(_ref3) {
-  var customization = _ref3.customization,
-    id = _ref3.id,
-    embedScriptLink = _ref3.embedScriptLink,
-    extraArgs = _ref3.extraArgs,
-    inlineWrapperStyle = _ref3.inlineWrapperStyle,
-    iframeStyle = _ref3.iframeStyle,
-    queryParams = _ref3.queryParams;
+var formatIframeAttributes$1 = function formatIframeAttributes(attributes) {
+  return ramda.toPairs(attributes).map(function (_ref3) {
+    var _ref4 = _slicedToArray(_ref3, 2),
+      key = _ref4[0],
+      value = _ref4[1];
+    return "\n".concat(TAB_STRING).concat(key, "=\"").concat(value, "\"");
+  }).join("");
+};
+var inlineEmbedCode$1 = function inlineEmbedCode(_ref5) {
+  var customization = _ref5.customization,
+    id = _ref5.id,
+    embedScriptLink = _ref5.embedScriptLink,
+    extraArgs = _ref5.extraArgs,
+    inlineWrapperStyle = _ref5.inlineWrapperStyle,
+    iframeStyle = _ref5.iframeStyle,
+    queryParams = _ref5.queryParams;
   var elementSelector = customization.elementSelector,
     dynamicHeight = customization.dynamicHeight;
   var processedInlineWrapperStyle = dynamicHeight !== null && dynamicHeight !== void 0 && dynamicHeight.value ? removeHeightFromStyle(inlineWrapperStyle) : inlineWrapperStyle;
   return "\n  <!-- ".concat(globalProps.appName, " inline embed code begins -->\n  <div style=\"").concat(processedInlineWrapperStyle, "\" id=\"").concat(elementSelector, "\">\n    <!-- ").concat(globalProps.appName, " widget will be added here -->\n  </div>\n  ").concat(embedBaseScript(embedScriptLink), "\n  <script>\n    ").concat(camelCasedAppName$1, ".embed({\n      type: \"inline\",\n      id: \"").concat(id, "\",\n      organization: \"").concat(globalProps.organization.subdomain, "\",\n      elementSelector: \"#").concat(elementSelector, "\",\n      styles: \"").concat(iframeStyle, "\", ").concat(embedQueryParam$1(queryParams)).concat(embedEnv$1()).concat(parseExtraArgs$1(extraArgs), "\n    });\n  </script>\n  <!-- ").concat(globalProps.appName, " inline embed code ends -->");
 };
-var floatingPopupEmbedCode$1 = function floatingPopupEmbedCode(_ref4) {
-  var customization = _ref4.customization,
-    id = _ref4.id,
-    embedScriptLink = _ref4.embedScriptLink,
-    extraArgs = _ref4.extraArgs,
-    queryParams = _ref4.queryParams;
+var floatingPopupEmbedCode$1 = function floatingPopupEmbedCode(_ref6) {
+  var customization = _ref6.customization,
+    id = _ref6.id,
+    embedScriptLink = _ref6.embedScriptLink,
+    extraArgs = _ref6.extraArgs,
+    queryParams = _ref6.queryParams;
   var btnTextColor = customization.btnTextColor,
     showIcon = customization.showIcon,
     btnText = customization.btnText,
@@ -136,32 +144,33 @@ var floatingPopupEmbedCode$1 = function floatingPopupEmbedCode(_ref4) {
     icon = customization.icon;
   return "\n  <!-- ".concat(globalProps.appName, " floating-popup embed code begins -->\n  ").concat(embedBaseScript(embedScriptLink), "\n  <script>\n    ").concat(camelCasedAppName$1, ".embed({\n      type: \"floatingPopup\",\n      id: \"").concat(id, "\",\n      organization: \"").concat(globalProps.organization.subdomain, "\",\n      styles: {\n        btnTextColor: \"").concat(btnTextColor, "\",\n        btnPosition: \"").concat(btnPosition, "\",\n        btnColor: \"").concat(btnColor, "\",\n        btnText: \"").concat(btnText, "\", ").concat(icon ? "\n".concat(TAB_STRING).concat(TAB_STRING, "showIcon: ").concat(showIcon, ",") : "", "\n      },").concat(embedQueryParam$1(queryParams)).concat(embedEnv$1()).concat(parseExtraArgs$1(extraArgs), "\n    });\n  </script>\n  <!-- ").concat(globalProps.appName, " floating-popup embed code ends -->");
 };
-var elementPopupEmbedCode$1 = function elementPopupEmbedCode(_ref5) {
-  var customization = _ref5.customization,
-    id = _ref5.id,
-    embedScriptLink = _ref5.embedScriptLink,
-    extraArgs = _ref5.extraArgs,
-    queryParams = _ref5.queryParams;
+var elementPopupEmbedCode$1 = function elementPopupEmbedCode(_ref7) {
+  var customization = _ref7.customization,
+    id = _ref7.id,
+    embedScriptLink = _ref7.embedScriptLink,
+    extraArgs = _ref7.extraArgs,
+    queryParams = _ref7.queryParams;
   var elementSelector = customization.elementSelector;
   return "\n  <!-- This is a demo button, you can use any element on your website instead. -->\n  <!-- <button id=\"".concat(elementSelector, "\">Click to open popup</button> -->\n\n  <!-- ").concat(globalProps.appName, " element-click embed code begins -->\n  ").concat(embedBaseScript(embedScriptLink), "\n  <script>\n    ").concat(camelCasedAppName$1, ".embed({\n      type: \"elementClick\",\n      id: \"").concat(id, "\",\n      organization: \"").concat(globalProps.organization.subdomain, "\",\n      elementSelector: \"#").concat(elementSelector, "\",").concat(embedQueryParam$1(queryParams)).concat(embedEnv$1()).concat(parseExtraArgs$1(extraArgs), "\n    });\n  </script>\n  <!-- ").concat(globalProps.appName, " element-click embed code ends -->");
 };
-var iframeEmbedCode$1 = function iframeEmbedCode(_ref6) {
-  var id = _ref6.id,
-    customization = _ref6.customization,
-    queryParams = _ref6.queryParams,
-    embedScriptLink = _ref6.embedScriptLink;
+var iframeEmbedCode$1 = function iframeEmbedCode(_ref8) {
+  var id = _ref8.id,
+    customization = _ref8.customization,
+    queryParams = _ref8.queryParams,
+    embedScriptLink = _ref8.embedScriptLink;
   var height = customization.height,
     width = customization.width,
     iframeTitle = customization.iframeTitle,
     iframeUrl = customization.iframeUrl,
-    dynamicHeight = customization.dynamicHeight;
+    dynamicHeight = customization.dynamicHeight,
+    iframeAttributes = customization.iframeAttributes;
   var iframeSrc = buildIframeURL$1({
     id: id,
     iframeUrl: iframeUrl,
     queryParams: queryParams
   });
   var heightAttribute = dynamicHeight !== null && dynamicHeight !== void 0 && dynamicHeight.value ? "" : "\n".concat(TAB_STRING, "height=\"").concat(height, "\"");
-  return "\n  <!-- ".concat(globalProps.appName, " iframe embed code begins -->\n  ").concat(dynamicHeight !== null && dynamicHeight !== void 0 && dynamicHeight.value && embedScriptLink ? embedBaseScript(embedScriptLink) : "", "\n  <iframe\n    allowfullscreen").concat(heightAttribute, "\n    width=\"").concat(width, "\"\n    frameborder=\"0\"\n    title=\"").concat(iframeTitle, "\"\n    src=\"").concat(iframeSrc, "\"\n  ></iframe>\n  <!-- ").concat(globalProps.appName, " iframe embed code ends -->");
+  return "\n  <!-- ".concat(globalProps.appName, " iframe embed code begins -->\n  ").concat(dynamicHeight !== null && dynamicHeight !== void 0 && dynamicHeight.value && embedScriptLink ? embedBaseScript(embedScriptLink) : "", "\n  <iframe\n    allowfullscreen").concat(heightAttribute, "\n    width=\"").concat(width, "\"\n    frameborder=\"0\"\n    title=\"").concat(iframeTitle, "\"\n    src=\"").concat(iframeSrc, "\"").concat(formatIframeAttributes$1(iframeAttributes), "\n  ></iframe>\n  <!-- ").concat(globalProps.appName, " iframe embed code ends -->");
 };
 var htmlCodeGenerators = {
   inline: inlineEmbedCode$1,
@@ -190,6 +199,14 @@ var parseExtraArgs = function parseExtraArgs(extraArgs) {
     return "\n".concat(TAB_STRING).concat(TAB_STRING).concat(key, ": \"").concat(value, "\"");
   });
 };
+var formatIframeAttributes = function formatIframeAttributes(attributes) {
+  return ramda.toPairs(attributes).map(function (_ref3) {
+    var _ref4 = _slicedToArray(_ref3, 2),
+      key = _ref4[0],
+      value = _ref4[1];
+    return "\n".concat(TAB_STRING).concat(TAB_STRING, "  ").concat(key, "=\"").concat(value, "\"");
+  }).join("");
+};
 var parseInlineStyle = function parseInlineStyle(styleString) {
   return styleString.split(";").map(function (rule) {
     var _rule$split$map = rule.split(":").map(function (s) {
@@ -201,25 +218,25 @@ var parseInlineStyle = function parseInlineStyle(styleString) {
     return key && value ? "".concat(key, ": \"").concat(value, "\"") : null;
   }).filter(Boolean).join(", ");
 };
-var inlineEmbedCode = function inlineEmbedCode(_ref3) {
-  var customization = _ref3.customization,
-    id = _ref3.id,
-    embedScriptLink = _ref3.embedScriptLink,
-    extraArgs = _ref3.extraArgs,
-    inlineWrapperStyle = _ref3.inlineWrapperStyle,
-    iframeStyle = _ref3.iframeStyle,
-    queryParams = _ref3.queryParams;
+var inlineEmbedCode = function inlineEmbedCode(_ref5) {
+  var customization = _ref5.customization,
+    id = _ref5.id,
+    embedScriptLink = _ref5.embedScriptLink,
+    extraArgs = _ref5.extraArgs,
+    inlineWrapperStyle = _ref5.inlineWrapperStyle,
+    iframeStyle = _ref5.iframeStyle,
+    queryParams = _ref5.queryParams;
   var elementSelector = customization.elementSelector,
     dynamicHeight = customization.dynamicHeight;
   var processedInlineWrapperStyle = dynamicHeight !== null && dynamicHeight !== void 0 && dynamicHeight.value ? removeHeightFromStyle(inlineWrapperStyle) : inlineWrapperStyle;
   return "\n  import { useEffect } from \"react\";\n\n  const App = () => {\n    const ".concat(embedFunctionName, " = () => {\n      ").concat(embedScript(embedScriptLink), "\n      embedScript.onload = () => {\n        window.").concat(camelCasedAppName, ".embed({\n          type: \"inline\",\n          id: \"").concat(id, "\",\n          organization: \"").concat(globalProps.organization.subdomain, "\",\n          elementSelector: \"#").concat(elementSelector, "\",\n          styles: \"").concat(iframeStyle, "\",").concat(embedQueryParam(queryParams)).concat(embedEnv()).concat(parseExtraArgs(extraArgs), "\n        });\n      };\n\n      document.body.appendChild(embedScript);\n      ").concat(cleanupFunction, "\n    };\n\n    useEffect(() => ").concat(embedFunctionName, "(), []);\n\n    return (\n      <div\n        id=\"inline-embed-container\"\n        style={{ ").concat(parseInlineStyle(processedInlineWrapperStyle), " }}\n      />\n    );\n  };");
 };
-var floatingPopupEmbedCode = function floatingPopupEmbedCode(_ref4) {
-  var customization = _ref4.customization,
-    id = _ref4.id,
-    embedScriptLink = _ref4.embedScriptLink,
-    extraArgs = _ref4.extraArgs,
-    queryParams = _ref4.queryParams;
+var floatingPopupEmbedCode = function floatingPopupEmbedCode(_ref6) {
+  var customization = _ref6.customization,
+    id = _ref6.id,
+    embedScriptLink = _ref6.embedScriptLink,
+    extraArgs = _ref6.extraArgs,
+    queryParams = _ref6.queryParams;
   var btnTextColor = customization.btnTextColor,
     showIcon = customization.showIcon,
     btnText = customization.btnText,
@@ -228,31 +245,32 @@ var floatingPopupEmbedCode = function floatingPopupEmbedCode(_ref4) {
     icon = customization.icon;
   return "\n  import { useEffect } from \"react\";\n\n  const App = () => {\n    const ".concat(embedFunctionName, " = () => {\n      ").concat(embedScript(embedScriptLink), "\n      embedScript.onload = () => {\n        window.").concat(camelCasedAppName, ".embed({\n          type: \"floatingPopup\",\n          id: \"").concat(id, "\",\n          organization: \"").concat(globalProps.organization.subdomain, "\",\n          styles: {\n            btnTextColor: \"").concat(btnTextColor, "\",\n            btnPosition: \"").concat(btnPosition, "\",\n            btnColor: \"").concat(btnColor, "\",\n            btnText: \"").concat(btnText, "\",").concat(icon ? "\n".concat(TAB_STRING).concat(TAB_STRING).concat(TAB_STRING, "showIcon: ").concat(showIcon, ",") : "", "\n          },").concat(embedQueryParam(queryParams)).concat(embedEnv()).concat(parseExtraArgs(extraArgs), "\n        });\n      };\n\n      document.body.appendChild(embedScript);\n      ").concat(cleanupFunction, "\n    };\n\n    useEffect(() => ").concat(embedFunctionName, "(), []);\n\n    return <div />;\n  };");
 };
-var elementPopupEmbedCode = function elementPopupEmbedCode(_ref5) {
-  var customization = _ref5.customization,
-    id = _ref5.id,
-    embedScriptLink = _ref5.embedScriptLink,
-    extraArgs = _ref5.extraArgs,
-    queryParams = _ref5.queryParams;
+var elementPopupEmbedCode = function elementPopupEmbedCode(_ref7) {
+  var customization = _ref7.customization,
+    id = _ref7.id,
+    embedScriptLink = _ref7.embedScriptLink,
+    extraArgs = _ref7.extraArgs,
+    queryParams = _ref7.queryParams;
   var elementSelector = customization.elementSelector;
   return "\n  import { useEffect } from \"react\";\n\n  const App = () => {\n    const ".concat(embedFunctionName, " = () => {\n      ").concat(embedScript(embedScriptLink), "\n      embedScript.onload = () => {\n        window.").concat(camelCasedAppName, ".embed({\n          type: \"elementClick\",\n          id: \"").concat(id, "\",\n          organization: \"").concat(globalProps.organization.subdomain, "\",\n          elementSelector: \"#").concat(elementSelector, "\",").concat(embedQueryParam(queryParams)).concat(embedEnv()).concat(parseExtraArgs(extraArgs), "\n        });\n      };\n\n      document.body.appendChild(embedScript);\n      ").concat(cleanupFunction, "\n    };\n\n    useEffect(() => ").concat(embedFunctionName, "(), []);\n\n    return <button id=\"").concat(elementSelector, "\">Click to open popup</button>;\n  };");
 };
-var iframeEmbedCode = function iframeEmbedCode(_ref6) {
-  var customization = _ref6.customization,
-    id = _ref6.id,
-    queryParams = _ref6.queryParams;
+var iframeEmbedCode = function iframeEmbedCode(_ref8) {
+  var customization = _ref8.customization,
+    id = _ref8.id,
+    queryParams = _ref8.queryParams;
   var height = customization.height,
     width = customization.width,
     iframeTitle = customization.iframeTitle,
     iframeUrl = customization.iframeUrl,
-    dynamicHeight = customization.dynamicHeight;
+    dynamicHeight = customization.dynamicHeight,
+    iframeAttributes = customization.iframeAttributes;
   var iframeSrc = buildIframeURL$1({
     id: id,
     iframeUrl: iframeUrl,
     queryParams: queryParams
   });
   var heightAttribute = dynamicHeight !== null && dynamicHeight !== void 0 && dynamicHeight.value ? "" : "\n".concat(TAB_STRING).concat(TAB_STRING, "  height=\"").concat(height, "\"");
-  return "\n  const App = () => {\n    return (\n      <>\n        {/* ".concat(globalProps.appName, " iframe embed code begins */}\n        <iframe\n          allowFullScreen").concat(heightAttribute, "\n          width=\"").concat(width, "\"\n          frameBorder=\"0\"\n          title=\"").concat(iframeTitle, "\"\n          src=\"").concat(iframeSrc, "\"\n        ></iframe>\n        {/* ").concat(globalProps.appName, " iframe embed code ends */}\n      </>\n    );\n  };\n");
+  return "\n  const App = () => {\n    return (\n      <>\n        {/* ".concat(globalProps.appName, " iframe embed code begins */}\n        <iframe\n          allowFullScreen").concat(heightAttribute, "\n          width=\"").concat(width, "\"\n          frameBorder=\"0\"\n          title=\"").concat(iframeTitle, "\"\n          src=\"").concat(iframeSrc, "\"").concat(formatIframeAttributes(iframeAttributes), "\n        ></iframe>\n        {/* ").concat(globalProps.appName, " iframe embed code ends */}\n      </>\n    );\n  };\n");
 };
 var reactCodeGenerators = {
   inline: inlineEmbedCode,
@@ -262,8 +280,8 @@ var reactCodeGenerators = {
 };
 
 var _excluded$1 = ["selectedLanguage", "type"];
-function ownKeys$7(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$7(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$7(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$7(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$8(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$8(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$8(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$8(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var buildQueryParams$1 = function buildQueryParams() {
   var customization = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   var existingQueryParams = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
@@ -273,7 +291,7 @@ var buildQueryParams$1 = function buildQueryParams() {
     if (value) acc[key] = value;
     return acc;
   }, {});
-  var mergedQueryParams = _objectSpread$7(_objectSpread$7({}, existingQueryParams), activeOptions);
+  var mergedQueryParams = _objectSpread$8(_objectSpread$8({}, existingQueryParams), activeOptions);
   if (ramda.isEmpty(mergedQueryParams)) return "";
   return JSON.stringify(mergedQueryParams, null, 2).replace(/\n/g, " ").replace(/\s\s+/g, " ");
 };
@@ -284,7 +302,7 @@ var generateCode = function generateCode(options) {
     embeddedCodeOptions = _objectWithoutProperties(options, _excluded$1);
   var queryParams = ((_embeddedCodeOptions$ = embeddedCodeOptions.customization) === null || _embeddedCodeOptions$ === void 0 ? void 0 : _embeddedCodeOptions$.queryParams) || {};
   var customization = embeddedCodeOptions.customization || {};
-  var codeOptions = _objectSpread$7(_objectSpread$7({}, embeddedCodeOptions), {}, {
+  var codeOptions = _objectSpread$8(_objectSpread$8({}, embeddedCodeOptions), {}, {
     queryParams: buildQueryParams$1(customization, queryParams)
   });
   return selectedLanguage === "react" ? (_reactCodeGenerators$ = reactCodeGenerators[type]) === null || _reactCodeGenerators$ === void 0 ? void 0 : _reactCodeGenerators$.call(reactCodeGenerators, codeOptions) : (_htmlCodeGenerators$t = htmlCodeGenerators[type]) === null || _htmlCodeGenerators$t === void 0 ? void 0 : _htmlCodeGenerators$t.call(htmlCodeGenerators, codeOptions);
@@ -329,8 +347,8 @@ var removeHeightFromStyle = function removeHeightFromStyle(style) {
   return style.replace(/height\s*:\s*[^;]+;?\s*/g, "").trim();
 };
 
-function ownKeys$6(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$6(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$6(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$6(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$7(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$7(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$7(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$7(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var DynamicQueryParams = function DynamicQueryParams(_ref) {
   var updateCustomization = _ref.updateCustomization;
   var _useTranslation = reactI18next.useTranslation(),
@@ -356,7 +374,7 @@ var DynamicQueryParams = function DynamicQueryParams(_ref) {
   };
   var handleInputChange = function handleInputChange(index, field, value) {
     var newQueryParams = queryParams.map(function (param, i) {
-      return i === index ? _objectSpread$6(_objectSpread$6({}, param), {}, _defineProperty({}, field, value)) : param;
+      return i === index ? _objectSpread$7(_objectSpread$7({}, param), {}, _defineProperty({}, field, value)) : param;
     });
     setQueryParams(newQueryParams);
   };
@@ -372,7 +390,7 @@ var DynamicQueryParams = function DynamicQueryParams(_ref) {
       children: [/*#__PURE__*/jsxRuntime.jsx(Label, {
         "data-testid": "dynamic-query-params-label",
         children: queryParamsProps.label || t("neetoMolecules.productEmbed.queryParam.label")
-      }), neetoCist.isPresent(queryParamsProps.helpPopoverProps) && /*#__PURE__*/jsxRuntime.jsx(HelpPopover, _objectSpread$6({
+      }), neetoCist.isPresent(queryParamsProps.helpPopoverProps) && /*#__PURE__*/jsxRuntime.jsx(HelpPopover, _objectSpread$7({
         className: "ms-1"
       }, queryParamsProps.helpPopoverProps))]
     }), queryParams.map(function (param, index) {
@@ -552,8 +570,8 @@ var FloatingPopup$1 = function FloatingPopup(_ref) {
 };
 
 var _excluded = ["value", "label", "helpIconProps"];
-function ownKeys$5(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$5(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$5(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$5(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$6(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$6(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$6(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$6(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var SwitchOptions = function SwitchOptions(_ref) {
   var _ref$customization = _ref.customization,
     customization = _ref$customization === void 0 ? {} : _ref$customization,
@@ -578,12 +596,12 @@ var SwitchOptions = function SwitchOptions(_ref) {
         checked: value,
         label: label || SWITCH_OPTIONS[option].label,
         labelProps: helpIconProps && {
-          helpIconProps: _objectSpread$5({
+          helpIconProps: _objectSpread$6({
             "data-testid": "help-icon-button"
           }, helpIconProps)
         },
         onChange: function onChange(e) {
-          return updateCustomization(_defineProperty({}, option, _objectSpread$5(_objectSpread$5({}, rest), {}, {
+          return updateCustomization(_defineProperty({}, option, _objectSpread$6(_objectSpread$6({}, rest), {}, {
             label: label,
             helpIconProps: helpIconProps,
             value: e.target.checked
@@ -666,11 +684,11 @@ var Inline$1 = function Inline(_ref) {
   });
 };
 
-function ownKeys$4(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$4(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$4(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$4(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$5(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$5(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$5(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$5(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var InlineEmbedIcon = function InlineEmbedIcon(_ref) {
   var other = Object.assign({}, (_objectDestructuringEmpty(_ref), _ref));
-  return /*#__PURE__*/jsxRuntime.jsxs("svg", _objectSpread$4(_objectSpread$4({
+  return /*#__PURE__*/jsxRuntime.jsxs("svg", _objectSpread$5(_objectSpread$5({
     fill: "none",
     height: "163",
     viewBox: "0 0 278 163",
@@ -919,7 +937,7 @@ var InlineEmbedIcon = function InlineEmbedIcon(_ref) {
 };
 var FloatingPopupIcon = function FloatingPopupIcon(_ref2) {
   var other = Object.assign({}, (_objectDestructuringEmpty(_ref2), _ref2));
-  return /*#__PURE__*/jsxRuntime.jsxs("svg", _objectSpread$4(_objectSpread$4({
+  return /*#__PURE__*/jsxRuntime.jsxs("svg", _objectSpread$5(_objectSpread$5({
     fill: "none",
     height: "163",
     viewBox: "0 0 278 163",
@@ -1063,7 +1081,7 @@ var FloatingPopupIcon = function FloatingPopupIcon(_ref2) {
 };
 var ElementPopupIcon = function ElementPopupIcon(_ref3) {
   var other = Object.assign({}, (_objectDestructuringEmpty(_ref3), _ref3));
-  return /*#__PURE__*/jsxRuntime.jsxs("svg", _objectSpread$4(_objectSpread$4({
+  return /*#__PURE__*/jsxRuntime.jsxs("svg", _objectSpread$5(_objectSpread$5({
     fill: "none",
     height: "163",
     viewBox: "0 0 278 163",
@@ -1289,11 +1307,11 @@ var Code = function Code(_ref) {
   });
 };
 
-function ownKeys$3(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$3(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$3(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$3(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$4(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$4(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$4(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$4(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var FloatingPopupPlaceholderImage = function FloatingPopupPlaceholderImage(_ref) {
   var other = Object.assign({}, (_objectDestructuringEmpty(_ref), _ref));
-  return /*#__PURE__*/jsxRuntime.jsxs("svg", _objectSpread$3(_objectSpread$3({
+  return /*#__PURE__*/jsxRuntime.jsxs("svg", _objectSpread$4(_objectSpread$4({
     fill: "none",
     height: "518",
     viewBox: "0 0 796 518",
@@ -1353,7 +1371,7 @@ var FloatingPopupPlaceholderImage = function FloatingPopupPlaceholderImage(_ref)
 };
 var ElementPopupPlaceholderImage = function ElementPopupPlaceholderImage(_ref2) {
   var other = Object.assign({}, (_objectDestructuringEmpty(_ref2), _ref2));
-  return /*#__PURE__*/jsxRuntime.jsxs("svg", _objectSpread$3(_objectSpread$3({
+  return /*#__PURE__*/jsxRuntime.jsxs("svg", _objectSpread$4(_objectSpread$4({
     fill: "none",
     height: "518",
     viewBox: "0 0 748 518",
@@ -1496,24 +1514,28 @@ function useIframeHeightReset(iframeRef, dynamicHeight) {
   }, [dynamicHeight === null || dynamicHeight === void 0 ? void 0 : dynamicHeight.value, iframeRef]);
 }
 
+function ownKeys$3(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$3(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$3(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$3(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Iframe = function Iframe(_ref) {
   var iframeURL = _ref.iframeURL,
     customization = _ref.customization;
   var height = customization.height,
     width = customization.width,
     iframeTitle = customization.iframeTitle,
-    dynamicHeight = customization.dynamicHeight;
+    dynamicHeight = customization.dynamicHeight,
+    iframeAttributes = customization.iframeAttributes;
   var iframeRef = React.useRef(null);
   useIframeHeightReset(iframeRef, dynamicHeight);
-  return /*#__PURE__*/jsxRuntime.jsx("iframe", {
+  return /*#__PURE__*/jsxRuntime.jsx("iframe", _objectSpread$3(_objectSpread$3({}, _objectSpread$3(_objectSpread$3({}, iframeAttributes), {}, {
     height: height,
-    width: width,
+    width: width
+  })), {}, {
     allowFullScreen: true,
     className: "m-auto border-0",
     ref: iframeRef,
     src: iframeURL,
     title: iframeTitle
-  });
+  }));
 };
 
 var Inline = function Inline(_ref) {