3B Knowledge

Embedding 3B Forms in Various Environments

Revision as of 22:28, 20 September 2023 by Admin (talk | contribs) (Created page with "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...")
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

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:

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

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.

<!-- 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>

External Embedding with Salesforce Sites

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

The first part of the URL (https://your-salesforce-instance.com/forms) 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.

https://your-salesforce-instance.com/forms/resource/b3f__GeneralUtils/index.js

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.

Retrieved from ‘https://3bknowhow.com/index.php?title=Embedding_3B_Forms_in_Various_Environments&oldid=276’