This article describes a process for creating a custom trigger on a webpage and explains how to connect a flow to a web element using its ID.
When you share your flow as a widget, there are different ways how your users can launch the flow on your webpage. Although there are standard MarbleFlows widget triggers you can choose from, this article will be about creating and implementing custom triggers. In this article, examples will be shown on the Webflow website builder. All the other website builders or applications work the similar way.
To start creating a custom trigger, you need to have and ID of the element on your webpage. I some cases the are predefined, sometimes you can create this ID. In the Webflow example, you can set up the ID name in the Settings sections of the element. Copy this element ID and go to your MarbleFlows account and open the flow you need to connect to this element.
Once you're in the flow editor, click on 'Share'.
You'll be redirected to the Sharing mode of the flow. Click on 'Widget', and in the section 'Trigger and Widget Settings' click on 'Trigger', then choose the 'Custom' tab. There, paste the element ID you copied before.
Once everything is ready, and other optional settings are adjusted, click on 'Copy Code' and navigate yourself to the tool you want to share your flow in. Again, in my case it's Webflow, a website builder.
You have to paste the MarbleFlows code into the <head > tag section of the page where your connecting element is located on.
Save the changes, and launch the page with the element. Once the button is clicked, it will trigger the flow, and it will open.
If you have any questions or difficulties with this functionality, feel free to reach out to us via email: firstname.lastname@example.org. We'll be more than happy to help!
MarbleFlows Support Team
Did this answer your question?