Super

💡

This is a step-by-step guide to add Vialog to your Super website.

Prerequisites:

Have a Super website.
Your 8-character discussion shortcode from your Vialog Dashboard. Read details here?
This HTML code snippet:

<script>
	  if(document.readyState === 'loading') { 
		document.addEventListener('DOMContentLoaded',loadVialog); 
	} 
	else { 
		loadVialog(); 
	}
	
	function loadVialog() { 
		const embedPos = document.getElementById('NOTION_BLOCK_WITH_ID')
		var sc = document.createElement('script') 
		sc.setAttribute('src','https://ui.vialog.io/vialog-loader.js') 
		sc.setAttribute('data-vialog','YOUR_DISCUSSION_SHORTCODE')
 		sc.setAttribute('data-lang','en') // optional
		embedPos.insertAdjacentElement('afterend',sc) 
	} 
</script>

Vialog embed snippet for Super

The Vialog.io website runs on Super.

Steps

Sign in to your Super account.

Click on “Pages” and click on the “...” of the page you want to edit and select the “Edit custom code”.

In the “Body” section, paste in the Vialog embed snippet for Super.

Change YOUR_DISCUSSION_SHORTCODE to your 8-character discussion short-code. To get your unique discussion shortcode, go to your Vialog Dashboard and click on the discussion you want to embed. Look for the discussion short-code in your browser’s URL bar.

The discussion short-code is a unique combination of 8 characters (numbers and letters) after the “/” and before the “?” symbols on the settings page of the specific discussion.

Change NOTION_BLOCK_WITH_ID to the block after which you want to display the Vialog. Right-click the space on your website where you want to add Vialog and select “Inspect”. Look for the block name and copy paste that. It will look something like this: block-c837638ac8954cfe9cbf5e2e02611f86

Inspect the block-ID and paste it in the Super editor

Save the changes on the Super page and reload your website. Please Note that the Vialog will only display correctly in the live webpage (will not render properly inside Notion preview page).

FAQ

‣

Q: I’m trying to add multiple Vialog discussions to the same Super webpage.

To add two different Vialog discussions in a single Super webpage, use the following code. If you need help get in touch with us.

<script>
	  if(document.readyState === 'loading') { 
		document.addEventListener('DOMContentLoaded',loadVialog); 
	} 
	else { 
		loadVialog(); 
	}
	
	function loadVialog() { 
		const embedPos = document.getElementById('NOTION_BLOCK_WITH_ID')
		var sc = document.createElement('script') 
		sc.setAttribute('src','https://ui.vialog.io/vialog-loader.js') 
		sc.setAttribute('data-vialog','YOUR_FIRST_DISCUSSION_SHORTCODE') 
		embedPos.insertAdjacentElement('afterend',sc) 
	const embedPos2 = document.getElementById('SECOND_NOTION_BLOCK_WITH_ID');
	var sc2 = document.createElement('script')
	sc2.setAttribute('src','https://ui.vialog.io/vialog-loader.js')
	sc2.setAttribute('data-vialog','YOUR_SECOND_DISCUSSION_SHORTCODE')
	embedPos2.insertAdjacentElement('afterend',sc2);
	} 
</script>

‣

Q: How can I change the language of the Vialog?

Use the shortcode of any available language listed here to modify the data-lang parameter:

Localise tool language

sc.setAttribute('data-lang','en')

This line of code is optional and by default Vialog discussions show in English.

This project has received funding from the European Union’s Horizon 2020 research and innovation programme through ARTICONF (825134) and STADIEM (951981) projects.

Fully GDPR compliant | Supported by Innovate UK | Comes with a Climate Positive Discussion promise

Follow us Twitter | Linkedin