Website Integration
In this guide we describe the main method to display a SMOC flow inside a web page on your own domain.
Background
To create a conversion flow on your home page or a feedback flow on your signed in pages, SMOC today gives you the ability to embed an iframe into your page. An example of this you can see here on the SMOC.ai site SMOC - How can I use it
We will in this guide show you how it is done.
Prerequisites
To perform this guide you will need to have created a flow in the SMOC design studio and have access to the web hosting system of your web pages.
Getting your iFrame Code
Go into SMOC Flow studio for the flow you want to publish. Then follow these four steps.
- Press “Settings”
- Press “Display Settings” in the right side bar
- Make sure “IFRAME MODE” is toggled on
- Press “Copy Code”
You should now have your iframe code ready for pasting into your web publishing tool.
Adding your iframe code to your page
You now need to go into your favorite webside editor and paste the code iframe code in place. You typically want to embed the code inside a div that is placed correctly based on your design on the page. For this particular page we use Hubspot for our publishing and the embed the code in rich text element on the page and press advanced mode. In that case you can paste the iframe code into the editor window. Our clients use multiple publishing tools and all support custom code embeds in some form or another.
If you inspect the page code in your web browser, it looks like this.
Parameters to add to the URL
These are the parameters you can append to the src url in the iframe.
| URL Parameter | Comments |
|---|---|
language=[language_code] | Set language (language code) of flow. Priority: a) Applied if flow has not specified language. b) If no language parameter or no language set it in the flow, it chooses the browser language. c) If the browser language is not supported it chooses English (en). |
draft_mode=true | Runs the flow in draft mode and analytics are not stored on the flow. This is the same param that is appended to the flow url from draft-mode in studio. |
user_token=[hash] | Logs in the user based on the users token as stored in the database (token used based on security). Is typically used as a field for handling Cross page conversation mode - a setting in the studio. |