如何在您的网站上嵌入计算器– Web计算器案例研究＃10

让我们仔细看看HTML和iFrame代码之间的区别。 并检查如何将Calculoid嵌入到最受欢迎的网站构建器中。

HTML和iFrame

将计算器设置为“完成”后，将自动生成两个代码：HTML和iFrame。 两种代码都包含JavaScript和HTML，并且具有不同的规范和参数。 HTML代码下的复选框允许您设置是否要显示计算器名称和描述。 复选框适用于HTML和iFrame

嵌入名为“ HTML” w的代码

此嵌入代码使您可以将网站中的CSS样式应用于计算器。 大多数样式会自动应用。 这是一个很好的机会，可以轻松使计算器看起来像是您的网络本机。 但是，有一些陷阱。 您网站上的某些样式可能会与Calculoid CSS发生冲突，并损害计算器的外观和/或功能。 此外，基于Wordpress的网站可能需要安装 Calculoid插件。 HTML代码适合大多数Calculoid用户。 如果您不使用WordPress，请先尝试HTML代码。

嵌入名为“ iFrame”的代码

如上所述，此代码包含JavaScript和HTML以及称为“ HTML”的代码。 但是，它具有嵌入内容周围的框架。 这导致您网站上的CSS样式未应用于您的计算器。 您仍然可以使用Calculoid设计设置并将您的自定义CSS添加到嵌入代码中，使计算器看起来对您的网站而言是本机的。 我们的开发人员可以 创建自定义CSS 为了你。 iFrame代码也有一些弱点。 Google不喜欢带有框架的嵌入式内容。 嵌入iFrame对嵌入计算器的网页的SEO几乎没有影响。 但是，这种影响从来都不是戏剧性的。 如果在嵌入HTML后出现样式冲突，请尝试使用iFrame代码。

WordPress插件

在基于WordPress的网站上嵌入Calculoid的最佳做法是使用我们的插件。 可以找到有关插件的所有信息 点击此处。 最重要的是在插件设置中放入正确的API密钥。 可以在Calculoid应用程序的“我的资料”页面上找到密钥。

简码示例：[calculoid id =“ 60204” show_title =“ 0” show_description =“ 0”]

使用此计算器生成短代码。

此外，Calculoid具有用于的插件 的Joomla 和 Drupal的.

嵌入最常用的Web构建平台的测试

⚠️-WordPress的主题太多了，Elementor这样的建设者也很多。 使HTML嵌入代码在每个WordPress网站上正常工作几乎是不可能的。 但是，该代码可与顶级构建器一起使用。