Publish
Embedded Form Widget

Embedded Form Page

This method allows you to integrate the campaign widget to easily blend in with the layout of your entire web app.

Embedding your widget also makes it visible immediately on initial page load without having to click on a button or look for a visible pop-up.

It's the best way to have ralipo campaign on your page to blend with your website design.

There are two forms in which embedded form page can be added to your project, which are:


embed within a page

  1. iFrame: Also known as inline Frame, iFrame allows you to load a new page in another html page. All you need is to add the iFrame tag ralipo provides into your codebase and decide the position from the code.

  2. Web Component: Here, a javascript code snippet ( which can be copied ) for the campaign form widget is generated. The javascript snippet is a IIFE (Immediately Invoked Function Expression), let's save the technicality for later.

How to add an embedded form page to your web application

  1. iFrame: To add an embedded campaign form page through iFrame, simply copy the iFrame tag in the image below and add to your html.


    iframe

    Here's how the iFrame tag is added in an html code


    iframe

  2. Web component: To add a Ralipo embedded campaign form through the use of web component, you have to add

    1. An IIFE (Immediately Invoked Function Expression) within a script tag of your html Code
    2. Then add an <ra-embed> tag in the html body.
      web component

Here's a code sample to explain how you can do this

index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>IFrame Tag</title>
  </head>
  <body>
    <h1>Welcome to Our Page</h1>
    <p>Fill our Form below</p>
    <ra-embed campaign-api-key="***|***************"></ra-embed>
    <script>
      (function (n, r, c, o) {
        const e = n.document.createElement("script"),
          t = r.getElementsByTagName(c)[0];
        (e.async = !0),
          (e.type = "module"),
          (e.src = o),
          t.parentNode?.insertBefore(e, t);
      })(
        window,
        document,
        "script",
        "https://widget.ralipo.com/ralipo/ralipo.js",
        "ralipo"
      );
    </script>
  </body>
</html>

Important: You need to replace ***|*********** with your unique widget ID. You can find your widget ID in the campaign settings page.

Popup WidgetSharable Form Link