View source for Embedding 3B Forms in Various Environments

3B Forms v4 offers versatile options for embedding forms in different environments, including Visualforce Pages, Salesforce Communities (digital experiences), and external websites. In this article, we'll explore two methods for embedding forms: using embedded iframes and web components. Additionally, we'll cover the setup required when embedding forms externally to Salesforce.

== Method 1: Embedded Iframes ==

=== Embedding on External Websites ===
Embedding a 3B Form on a customer's website can be achieved securely using an iframe. This method ensures that the page and communication are facilitated through Salesforce, maintaining enhanced security. Here's an example of how to create an iframe for embedding a form:

* <code>src</code>: Replace this URL with the actual URL of your 3B Form. You can include the form ID and record ID as needed.
* <code>width</code> and <code>height</code>: Adjust these values to fit your desired dimensions.
* <code>frameborder</code>: Set this to "0" to remove the iframe border.
* <code>scrolling</code>: Set this to "no" to disable scrolling within the iframe.
<syntaxhighlight lang="html">
<iframe
    src="https://your-salesforce-instance.com/b3f__Form?id=xxxxxx&recordId=xxxxxx"
    width="100%"
    height="600"
    frameborder="0"
    scrolling="no"
></iframe>
</syntaxhighlight>

=== Method 2: Web Component Embedding ===
When embedding a 3B Form as a web component on a page, you must include two additional scripts in the head of the HTML document to ensure proper functionality:

These scripts are essential for the web component to function correctly.<syntaxhighlight lang="html">
<!-- Document Head Element -->
<script src="{!URLFOR($Resource.b3f__GeneralUtils, 'index.js')}" defer="true" type="module"/>
<script src="{!URLFOR($Resource.b3f__FormComplete, 'index.js')}" defer="true" type="module"/>
<!-- Document Body Element -->
 <form-complete
    form-id=""
    version-id=""
    record-id=""
></form-complete>
</syntaxhighlight>

== External Embedding with Salesforce Sites ==
When embedding forms externally to Salesforce, you'll need to generate and host the <code>b3f__GeneralUtils</code> and <code>b3f__FormComplete</code> links on a Guest Site using Salesforce Sites. These links should follow a structure like this:

The first part of the URL (<code><nowiki>https://your-salesforce-instance.com/forms</nowiki></code>) represents the guest site or community base URL. Ensure that you replace it with the appropriate URL for your Salesforce instance.

By hosting these scripts on a Salesforce Site, you can securely embed 3B Forms on external websites while maintaining the required functionality.<syntaxhighlight lang="text">
https://your-salesforce-instance.com/forms/resource/b3f__GeneralUtils/index.js

</syntaxhighlight>

== Summary ==
3B Forms v4 provides flexibility in embedding forms in various environments, including Visualforce Pages, Salesforce Communities, and external websites. You can choose between embedded iframes and web components based on your specific use case.

When embedding externally, make sure to host the necessary scripts on a Salesforce Site to ensure proper functionality and security. This enables you to seamlessly integrate 3B Forms into your digital experiences and external websites while leveraging the power and security of Salesforce.
[[Category:3B Forms]]