Step by step tutorial?

[vahidtakro]

hello, I am a new learner of next.js, I don't know how to self-host and integrate Cusdis with next.js which is deployed on vercel. anyone knows how to do it? I want to customize it, how it looks, dark-mode and so on.

[candideu]

Hey @vahidtakro, check out this tutorial for info on deploying on Vercel, storing the code in Github or Gitlab, and hosting the database on Railway: https://youtu.be/XHr0oBIA2xA (tutorial starts at 15:40)

I had never self-hosted prior to this, so it's pretty beginner-friendly.

Now, in terms of customizing the look: once you have everything set up, you'll want to edit the file in your Github/Gitlab called "theme.css". Add your css class overrides in there. Embed a test of Cusdis on your site and add some test comments and replies so that you can use your browser's dev tools/Inspect Élément to identify what CSS classes to override.

[vahidtakro]

Now, in terms of customizing the look: once you have everything set up, you'll want to edit the file in your Githu

Thanks, I could learn how to do it with that youtube video last week, my problem now is: multilingual,

I am using i18n for internationalization, and everything works well at my end, but when I have Cusdis installed on, I have problems with the language, I followed the guide how to add new languages, this is how I added:

  const { locale } = useRouter()
.
.
.

      <ReactCusdis
        lang={locale}
        attrs={{
          host: 'https:/*****',
          appId: '******************',
          pageId: `${slug}`,
          pageTitle: `${title}`,
          pageUrl: `${siteMetadata.siteUrl}/${locale}/${slug}`,
        }}
      />

everything works fine with this code, but the language. the language is set only sometimes to the correct one, it's working when I go to the next / previous posts, but when I refresh the page, it's not working...

and also, I am using a RTL language as my second language, how can I customize the HTML dir and font depend on the language?

[candideu]

I don't have much experience with i18n, so I'll do my best to answer based on documentation. Hopefully, the dev can chime in (otherwise, email them using the email on the website).

The method you described here to add a new language doesn't seem to match the instructions I see in the documentation page: https://cusdis.com/doc#/advanced/i18n

Just to clarify: what language are you hoping to use?

And just to double-check:

• If the language that you want to use isn't [already implemented] (https://github.com/djyde/cusdis/tree/master/widget/lang): Did you create a js file in the widget/lang/ folder named after the language code ?
• If you created a new js file: did the file contain the following content (but everything after the ":" translated to your language): https://github.com/djyde/cusdis/blob/master/widget/lang/en.js ?
• When you embedded the widget on your website, did you add the script tag that pointed to the file you made (or existing language file) below the widget's code?

I'm asking because it's not clear from what was written whether this was done.

For LTR (I'm assuming you mean left-to-right text): how would you like to customize the directory and why?

[vahidtakro]

I don't have much experience with i18n, so I'll do my best to answer based on documentation. Hopefully, the dev can chime in (otherwise, email them using the email on the website).

The method you described here to add a new language doesn't seem to match the instructions I see in the documentation page: https://cusdis.com/doc#/advanced/i18n

Just to clarify: what language are you hoping to use?

And just to double-check:

• If the language that you want to use isn't [already implemented] (https://github.com/djyde/cusdis/tree/master/widget/lang): Did you create a js file in the widget/lang/ folder named after the language code ?
• If you created a new js file: did the file contain the following content (but everything after the ":" translated to your language): https://github.com/djyde/cusdis/blob/master/widget/lang/en.js ?
• When you embedded the widget on your website, did you add the script tag that pointed to the file you made (or existing language file) below the widget's code?

I'm asking because it's not clear from what was written whether this was done.

For LTR (I'm assuming you mean left-to-right text): how would you like to customize the directory and why?

Thanks for the reply, I am actually using react, so this is the code I needed to use: https://github.com/Cusdis/sdk/tree/master/packages/react-cusdis

also for the first question, I have my app in Persian and English, and yes I have created .js file. and yes everything is similar to other languages files, just the values are translated.

for RTL, I want if I switch my main app to Persian, Cusdis iframe becomes RTL (right to left) and in English it becomes like how it is now (LTR) , Persian is a RTL language.

[candideu]

Ahh, I see.... I'm not as familiar with React, so I'm afraid I won't be much help for this part. Hope you were able to find a solution or have heard back from the dev.

[arekgotfryd]

Hey @vahidtakro, I created blog post about cusdis integration with simple nextjs app. It contains link to example repository. Please see below and enjoy ;) https://www.arek.blog/posts/cusdis-integration-with-nextjs