Super

Super

πŸ’‘
This is a step-by-step guide to add Vialog to your Super website.

Prerequisites:

<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
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”.
image

  • 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 β€œ
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
    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:

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

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

image

Fully GDPR compliant | Comes with a Climate Positive Discussion promise | Supported by the European Commission and Innovate UK | Discuss with purpose

Β© Vialog Ltd 2022