通过 iframe 将 Standalone UI 嵌入到另一个网站的技术

Thrinacia 的独立 UI 具有大量的特性和功能。如果您想在其他网站上使用所有这些功能，本文将介绍通过 iframe 在您的网站上嵌入独立 UI 的步骤。

概括：

• 第一步：连接支付网关。
• 第 2 步：创建活动。
• 第 3 步：将 iframe 添加到页面并引用活动。
• 第 4 步：添加自定义 CSS 代码。

步骤 1. 连接支付网关。

为了创建活动，您必须首先连接支付网关以接受捐款。您可以通过两种方式设置付款：

1. 直接交易——这意味着所有捐款都进入一个与平台相连的 Stripe 账户。阅读本文，了解如何为此场景连接支付网关。
2. 市场模式– 这允许您的活动创建者将他们自己的 Stripe 帐户连接到活动，并且您可以对捐赠收取自动交易费用。阅读本文，了解如何为此场景连接支付网关。

第 2 步。创建众筹活动。

为此，只需转到您的 Atlas URL，然后单击开始按钮或在您的 URL 后添加/start。例如：mywebsite.com/start 并开始创建活动。

按照步骤进行操作，然后发送活动以供审核。然后您可以通过阅读此常见问题解答来批准该活动 。一旦您的活动获得批准/运行，您将能够接受对该活动的捐款。您现在已准备好在单独的页面上托管活动。

第 3 步。将 iframe 添加到页面并引用活动。

建议使用空白页来引用活动。这将有助于避免页面上出现任何冲突的 CSS 。将以下 iframe 代码粘贴到页面上：

<iframe width="100%" height="500px" src="YOUR-URL-HERE" frameborder="0"></iframe>

您的活动的 URL 将位于独立 UI 上活动页面的 YOUR-URL-HERE 位置。下面是正在使用的 iframe 的示例：

将 iframe 粘贴到页面后，您可能会注意到它看起来可能不是您想要的样子，并且可能具有滚动效果，包括独立的 UI导航和页脚。这是正常现象，可以在 iframe 代码和独立 UI CSS 中进行调整。

如果您不介意独立 UI 导航、页脚和滚动条效果，那么这将是最后一步。如果您不喜欢滚动条的外观和独立的 UI 导航 + 页脚，则必须添加自定义样式。

第 4 步。添加自定义 CSS 代码。

在这里，我们将提供一些代码示例，您可以使用这些代码来使您的 iframe 在页面上看起来更好。CSS或级联样式表将允许您设置页面上元素的样式。由于您引用的是 iframe 代码，因此您会将 iframe 引用的整个内容作为一个整体元素来设置样式。

对于那些只在 iframe 代码中运行单个活动的人，您可能需要删除独立的 UI导航、社交媒体共享和页脚。为了删除这些项目，您必须将自定义 CSS 代码添加到独立 UI 网站。这是一篇解释向您的平台添加自定义 CSS 的过程的文章：  https://www.thrinacia.com/blog/post/tips-on-customizing-your-thrinacia-atlas-instance-via-simple-css- js代码

要删除导航、页脚和社交共享选项，您可以在平台上的自定义 CSS 文件中使用以下 CSS 代码：

html body #nav-wrapper,
html body #footer-wrap,
html body #socialicons-wrap {
   显示：无！重要；
}

现在您已经设置了广告系列的样式，接下来可以设置 iframe 的样式。作为建议，您可以将 iframe 代码更新为如下所示：

<iframe style="宽度: 100%; 高度: 3000px; 边框: 0px;" scrolling=no src="YOUR-URL-HERE" frameborder="0"></iframe>

从上面的HTML代码可以看出，有3000px的高度。这可能不够长，也可能太长，具体取决于您的广告系列的特定长度。因此，如果您的广告系列看起来被截断了，这意味着您需要增加 iframe 的高度。

您可能还会发现 iframe 没有全宽显示。这将迫使您向您的网站添加自定义CSS。请记住，由于布局原因，它可能不适用于所有网站。尝试使用以下 CSS：

.your-iframe-class-name  {  max-width : 100% !important ;  }

如果您使用上述 CSS 代码，则必须向您的 iframe 添加一个类。为此，只需添加：

<iframe class="your-class-name" style="width: 100%; height: 3000px; border: 0px;" scrolling=no src="YOUR-URL-HERE" frameborder="0"></iframe>

在 iframe 内部。

请注意，小部件的长度也会受到屏幕尺寸宽度的影响，例如，台式电脑的屏幕尺寸宽度将不同于手机的屏幕尺寸宽度。所以你需要根据不同的屏幕尺寸进行调整。要进行这些调整，您需要使用以下教程之一：

1.  调整 iframe 的宽度和高度以适应其中的内容
2. jQuery iframe 自动高度插件
3. 响应式网页设计——媒体查询

以上教程适用于更高级的用户。如果您需要帮助，如有任何问题，您可以随时联系support@thrinacia.com 。该活动应如下所示：

就是这样，一旦您对活动进行了正确的调整，您就可以开始获得支持者。祝你好运！