How to add an FAQ component to your Atlas website

Would you like FAQ capabilities on your crowdfunding site? This tutorial will cover an easy way to add an FAQ component to your Atlas platform.

We will be using the component provided by Skhemata, a partner of Thrinacia. Skhemata makes it easy to add components to any website and provides extensive functionality that can be customized via HTML attributes, CSS, and more. So let’s get started.

Step 1. Thrinacia Subscription

Since Thrinacia is partnered with Skhemata, you can gain access to the components by subscribing to the correct plan as outlined in this FAQ here.

If you don’t want to use the Scale plan, you can also try using the plans on the Skhemata pricing page as well, however, Thrinacia will provide WordPress hosting as part of the scale plan which is essential for this component to function properly. You will need to find a host for WordPress if you do not want to use the scale plan.

If you are using the scale plan, you can contact Thrinacia support when ready to use the FAQ component, and they will provide you with access to a WordPress instance.

Step 2. Install the Ultimate FAQ Plugin

This component requires the use of the ultimate FAQ plugin. You can download this plugin here: https://en-ca.wordpress.org/plugins/ultimate-faqs/

Once it’s downloaded on your WordPress instance, be sure to activate it. After activation, you can use the FAQ plugin to create a new FAQ. To do this, hover over FAQs in the WordPress dashboard, then click on “Add New”. This will allow you to add a new FAQ. It’s much like a blog post, but it will display much different when you decide to view all of them on a single page.

Step 3. Copy and paste the widget code

Now that you have a WordPress instance and the correct plugin installed, you can add the widget code to your site. The Skhemata components can be used in different ways. For this tutorial, we are going to be using the components via widget code. The actual source code is hosted on the Skhemata CDN so you will be able to easily copy and paste a small snippet of widget code to reference it.

Before you can add the widget code to your page, it is best to create placeholder FAQ’s as described in the previous step so that you can see what the component looks like on the page with content. For further reference, here is an example of the FAQ component. You can see this is the Skhemata documentation for the components, you can also see that there’s a tab for the widget code. This is not going to be the same as the widget code that needs to be pasted into the Atlas platform. Please use the code provided below as it needs to be pasted into a WYSIWYG editor. Such editors can have limitations so the widget code needs to be tailored for this.

Here is an example of the widget code:

<div class="ui page grid">
	<div class="column">
		<skhemata-faq faq-title="My FAQ" api-wordpress="{&quot;url&quot;: &quot;https://my-wordpress-site.com/wp-json/wp/v2&quot;}" faq-page-path="demo" faq-post-path="post" posts-per-page="10"></skhemata-faq>
		<script>
			async function check()
			{
				const script = await
				import ('https://cdn.jsdelivr.net/npm/@skhemata/skhemata-faq@latest/build/index.js');
			}

			check();

		</script>
	</div>
</div>

Copy the above code and paste it into a page on your platform. Make sure that you are viewing the page in the source code mode, or it will paste the raw HTML as a paragraph.

You can copy and paste the above code into a page on your platform. Replace the URL as seen in the code “my-wordpress-site” with the URL of your WordPress blog. You’ll notice that there’s a /wp-json/wp/v2 keep the path the same, do not delete it, if you do, the component won’t work. This path is referencing the WordPress back end. You can then save the page and see the component displayed. It should look something like this:

Step 4. Customize the component

You can check out the attributes listed in the Skhemata documentation along with the CSS properties.

For further manipulation and customization, you will need to do so via custom code. Remember, the widget’s source code is hosted on the Skhemata CDN, so you will not have access to manipulate this in particular, but you can add your own custom CSS, javascript, and use the provided attributes.

For any questions regarding the components or customization, contact Thrinacia or join Thrinacia’s Discord chat.