To make the embedded form work in the context of your website, you first need to specify the websites you want to allow to embed the widget. To do this, extend the CORS Origins list in your WebCRM settings accordingly. The allowed websites may be your local development server, http://localhost:3000, and your production server, e.g. https://example.com. When embedded into pages of other websites, the form is dysfunctional.
Then, include the following HTML and JavaScript snippet in the desired page:
<h3 id="crm-subscriptions-headline"></h3>
<p id="crm-subscriptions-infotext"></p>
<div id="crm-subscriptions-form"></div>
<script type="text/javascript">
var crm_tenant = 'my_tenant_name';
(function() {
var s = document.createElement('script'); s.type = 'text/javascript'; s.async = true;
var params = $.param({
f: {
locale: 'en',
page_url: window.location.href
}
})
s.src = 'https://' + crm_tenant + '.crm.infopark.net/embed/subscriptions?' + params;
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(s);
})();
</script>
The three HTML elements are identified by their ID attributes. The widget replaces the inner HTML content with the values that correspond to the current dialog in the opt-in process. As the user goes through the process, the inner HTML is changed accordingly. You can, of course, apply styles to the HTML elements as you wish.
The JavaScript code loads the form code from the WebCRM tenant my_tenant_name. Make sure to replace my_tenant_name with your tenant name.
Since you embedded the newsletter subscription widget on your website, you should instruct the WebCRM to include this particular website URL in mailings so that the subscription URLs in the mailing point to your website and not to the newsletter subscription page of your WebCRM.
<a href="{{ unsubscribe_url }}">Unsubscribe Me</a>
<a href="{{ edit_subscriptions_url }}">Edit My Subscriptions</a>
For example, set Link Target for Subscription Links to https://example.com/newsletter if that's the page that includes the form.