// installation
Add the finished form to your website, or share the link Offerandum hosts for you. Below are both options and a step-by-step guide you can hand to whoever runs your website.
// two ways
Either way your customers use the same form, with your logo, colors and price list. You can start with the link and add the form to your website later.
offerandum.com/your-company/quote
Your form has its own page on Offerandum, with your company name and branding. Send the link to a customer, put it in your e-mail signature or behind an "Request a quote" button on your website.
yourcompany.com/quote
Put the form where customers look for a price: on a "Get a quote" page, next to a product description or on the pricing page. Paste the code from the panel. The form fits the available width on desktop and phone.
// step by step
Have the Offerandum panel and your website editor open. Copy the code, paste it on the page, add the page's address in the panel and check the form.
Open the "Home" page of the Offerandum panel and find the published form. In "Code to paste on your website" choose "Copy code". Below is a sample; the code copied from the panel already has your form's id in place of f_YOUR_FORM.
<script type="module" src="https://offerandum.com/widget.js"></script>
<offerandum-form form-id="f_YOUR_FORM"></offerandum-form>The first line loads the Offerandum script. The second says which form to show and where on the page. If you use the sample above, replace f_YOUR_FORM with the id from the panel.
Simplest: in your website editor open the page, add an HTML block and paste both lines into it together. Save and publish. The form takes the width of the block you put it in. The names of the right blocks in popular systems are below.
Better for statistics: paste the first line (the script) once in the head of the whole site, in the place your system calls "head code", and leave only the element on the page with the form. A script present on every page remembers where the customer entered your site from, so the panel shows that a lead came from an ad or a search even when the customer reached the form from the third page. Without the element the script draws nothing and sends nothing.
<script type="module" src="https://offerandum.com/widget.js"></script><offerandum-form form-id="f_YOUR_FORM"></offerandum-form>The order does not matter, and nothing breaks if the script ends up on the page twice: the element works either way.
In the panel, under the code to paste, there is a section "Websites the form runs on". Check that your site's address is there, e.g. https://yourcompany.com. If it is missing, add it to the list. Add a staging site or a second domain separately if you use one.
The list limits where the form can be embedded. We add the address you gave us during setup for you. Need help? Write to contact@offerandum.com.
Open the page with the form on a computer and a phone. Check that the form displays correctly. To send a test lead use the test link from the panel; the lead is then marked as a test.
If you test the form embedded on your site, add the test-token attribute with the token from the test link. Replace the values in the sample with your own id and token. When you are done testing, remove the attribute to take real leads from customers.
<offerandum-form form-id="f_YOUR_FORM" test-token="TOKEN_FROM_PANEL"></offerandum-form>// popular systems
Find the system you use and pick the block or element named there. If you need help, write to contact@offerandum.com and we will walk you through the installation.
The "Custom HTML" block, or the "HTML" widget in Elementor
Paste the whole code into one HTML block where the form should appear. Save and check the published page.
Script in the site head: a plugin such as "WPCode" or "Insert Headers and Footers", the "Header" field; many themes also have Appearance → Customize → "Header code".
The "Embed" element (Code Embed)
Add an Embed element where you want the form and paste the whole code into it. Publish the site to check the form.
Script in the site head: Project settings → Custom code → "Head code", then publish the project.
The "Code" block
Paste the whole code into the block in HTML mode. If your plan does not run custom scripts, share the link to the form instead.
Script in the site head: Settings → Advanced → Code Injection → "Header" (Business plans and up).
A "Custom Liquid" section or a page template
Add a Custom Liquid section on the page and paste the whole code into it. Save and check that customers see the form.
Script in the site head: edit the theme code, file theme.liquid, before the closing head tag.
"Embed code" → "Embed HTML"
Paste the whole code into the HTML element. Set the frame height so the form fits, and check the phone view. You can also use the ready link to the form.
Script in the site head: Site settings → Custom code → "Head". The Wix element runs in its own frame, so paste both lines into it even with the script in the head.
The page file, e.g. quote.html
Add the script once, in the head or before the form. Put the offerandum-form element where the form should appear.
Script in the site head: the shared template or header file that every page includes.
Step-by-step guides for your platform: GoDaddy, Squarespace, Webflow, Wix, WooCommerce, WordPress
// for the technical person
The script adds an <offerandum-form> element to the page, which shows the form in its own frame from runtime.offerandum.com. The page's styles and the form's styles stay separate.
offerandum.com. Product videos load from Cloudflare Stream.Without these entries the widget will not load on the page. Add them to the header Content-Security-Policy:
script-srchttps://offerandum.comwidget scriptconnect-srchttps://offerandum.comprices, submissions and the assistantframe-srchttps://runtime.offerandum.comhttps://offerandum.comthe form and the check that the visitor is not a botmedia-srchttps://*.cloudflarestream.comproduct videosimg-srchttps://*.cloudflarestream.comvideo thumbnailsIf your website uses a Content Security Policy, hand the settings above to whoever manages it. The policy has to allow the connections the form needs.
// questions
The form loads extra resources, so it can affect page load time. The form itself runs in its own frame. After installing, check your page speed, especially on a phone.
Yes. Add the script only once, and for every form put a separate <offerandum-form> element with its id from the panel.
The form sets no tracking cookies. The customer sees the privacy notice and the marketing consents inside the form, with your company as the controller. How data is processed is described in the privacy policy and the data processing agreement.
Yes. Paste the same code on the new site. If the domain changes too, add its address in the panel, in "Websites the form runs on". Then check that the form displays correctly.
No. The customer fills in the form and submits a lead without creating an account. Signing in is for your team, to handle leads in the Offerandum panel.
Yes. Write to contact@offerandum.com with your website's address. We will work out how to add the form and help you check that it works. In the meantime you can already share the ready link from Offerandum.
Send us your price list as it is, no special preparation needed. Within 48 hours you get the first version of the form to check against your own quotes.