Alexander Bortnik

comment

How To Install Renteres on your site

Posted June 7, 2016 4k views WordPress SERVER Joomla Drupal NGINX Magento Blogger TYPO3

Introduction

In this tutorial, we will learn how to install Renteres as site owners (B2B).

Renteres is a very versatile app and can be installed on almost any existing web platform.
Whether your website uses Universal Code or a platform like WordPress or Joomla the Installation is super easy :]
All you need to do is follow this quick few steps, and you are ready to go !

Go a head to www.Renteres.com on the navigation bar go to –> Partners –> Get Started and click on the the kit that fit you the most.

You will now start to create your account with us, from which you’ll manage renteres on your site.
Follow the required steps that appears in the selected section and provide all the relevant information about your site in order to make sure Renteres integrates perfectly.

Enter Site name, Domain Name and Website URL, set the languages that are allowed in your conversations and click Submit.

Now a code will appear on the screen you will need to insert on your site.

Requirements

For this guide, you need the following:

  •      Basic knowledge in HTML
  •      Privilege user to change the Footer part of your site
  •      The script code from the registration (Introduction  part)
  •      5 Minutes

If for any reason you are unable to perform the integration on your own and you will need help to immigrate Renteres please contact our technical support department and we will assist you as soon as possible.

Installation

Look below to locate your site’s Platform and find specific instructions for the next steps in adding the Renteres code to your site.

Universal Code

Copy the code from the Introduction part into the “body” section of your HTML file.
To do this, find your closing </body> tag and paste the copied code just above it as shown below:

<script>
    Enter the Script Here
</script>
</body>
</html>

Important: make sure that this script is embedded across all of your HTML pages.

 

In the code you just pasted into your HTML Where it says “window.identifier” between the ‘ ‘ mark.

Adding a unique ID for each page on your site, so that a unique conversation is shown for each page.

<script>
....
window.identifier = ''; //optional -> insert identifier variable for your unique page's 
....
</script>

 

Warning: Please make sure that you have an up-to-date backup of the above file as this is a file that affects the entire system and any incorrect handling may influence the site.

WordPress

We assume you already have WordPress installed on your site and you the basic Knowledge for working with it.

If not please visit:

In the Dashboard go to “Appearance” there fine “Editor”, you will need to look in The new window on the right side a file name footer.php.

In the footer.php Scroll down to the end of the page where the tag </body> is displayed and enter the script as shown below:

 

<script>
    Enter the Script Here
</script>
</body>
</html>

When finish click “Update file” and you are set to go !

Warning: Please make sure that you have an up-to-date backup of the above file as this is a file that affects the entire WordPress system and any incorrect handling may influence the site.

 

Comment button + counter

For convenience, we added the option to open the comment bubble by pressing a button.
For using the click function, all you need to do is add the ID number supplied by Renteres to the button ID as shown in the following example:

Enter the ID to the Object, for example button type:

 <button type="button" id="renteres-comment-embed-btn">

Keep in mind that you can use any kind of Object such as Div/a/i and more.
If you want to display the number of comments on the specific page please add the following as well, Div example:

<Div id="renteres-comment-embed-count">

Adding DIV or Span elements, next to the written text on the button, in this example, next to “comment” you can see the number of comments on this page:

If you want to install a second button on the page, you will need to enter the following line for the second button:
Enter the ID of the second button:

 <button type="button" id="renteres-comment-embed-btn2">

Warning: Please make sure that you have an up-to-date backup of the above file as this is a file that affects the entire system and any incorrect handling may influence the site.

 

Login button

You can open the Renteres login section by pressing a button.
For using the click function, all you need to do is add the ID number supplied by Renteres to the button ID as shown in the
following example:

Enter the ID to the Object, for example button type:

 <button type="button" id="renteres-login-btn">

Keep in mind that you can use any kind of Object such as Div/a/i and more.
Example:

Warning: Please make sure that you have an up-to-date backup of the above file as this is a file that affects the entire system and any incorrect handling may influence the site.

If you want to add the button as part of a list of social networks bar: b
Or just to add a login button with Renteres image inside we offer you to do it in two ways:

Using a flat PNG image

1. copy the image below and add it to your server. Using the unique ID provided inside the HTML Tag the image will act like a button.

Renteres-btn

2. Add the following line inside your page:

 <img src="Your image path on the server" style="width:28px; height:28px; id="renteres-login-btn">

3. Keep in mind that in this example we added a square 28 pixel in dimensions “button” defined by the “style” parameters inside the code below, you can change it according to the design of your site but it’s important you will make sure to keep the ratio of the image 1:1 which basically means to keep the height and the with the same.

 

Creating a button using CSS

1. Inside your page, where you want to place the button insert this HTML tag:

 <a class="renteres-btn" id="renteres-login-btn"></a>

2. Copy the CSS code below and add it to your style CSS page:

 .renteres-btn {
 display: inline-block;
 text-align: center;
 vertical-align: middle;
 padding: 10px 10px;
 border: 1px solid #a99c99;
 border-radius: 8px;
 background: #f1dfda;
 background: -webkit-gradient(linear, left top, left bottom, from(##f1dfda), to(#a99c99));
 background: -moz-linear-gradient(top, #f1dfda, #a99c99);
 background: linear-gradient(to bottom, #f1dfda, #a99c99);
 -webkit-box-shadow: #dedede 1px 1px 40px 1px;
 -moz-box-shadow: #dedede 1px 1px 40px 1px;
 box-shadow: #dedede 1px 1px 40px 1px;
 text-shadow: #ffffff 1px 1px 1px;
 font: normal normal bold 5px arial;
 color: #111111;
 text-decoration: none;
}
.renteres-btn:hover,
.renteres-btn:focus {
 border: 1px solid #f1dfda;
 background: #ffffff;
 background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#cbbbb8));
 background: -moz-linear-gradient(top, #ffffff, #cbbbb8);
 background: linear-gradient(to bottom, #ffffff, #cbbbb8);
 color: #111111;
 text-decoration: none;
}
.renteres-btn:active {
 background: #a99c99;
 background: -webkit-gradient(linear, left top, left bottom, from(#a99c99), to(#a99c99));
 background: -moz-linear-gradient(top, #a99c99, #a99c99);
 background: linear-gradient(to bottom, #a99c99, #a99c99);
}
.renteres-btn:after{
 content: "\0000a0";
 display: inline-block;
 height: 24px;
 width: 24px;
 line-height: 24px;
 margin: 0 -4px -6px 4px;
 position: relative;
 top: -3px;
 left: -4px;
 background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA1BJREFUeNrsm+1x4jAQhg2TAijBN8f/mAriVBBTQaCChApIKghUYFIBpgJ8FYT8TyaU4A5yu3evc0LHh2RLIBztjMZgJFl6tLta28tFYEHeu92QDndUIioxlTWVFZXpz7e3PHBIWhYmP6BDuqdKRmVIIAoXAFwcefIsCY79RmkATb5Dhw8qHcUmrAWzJmnAQGPyLLdUZgeARsKplQ2zMQngSrN+vGfiTwAq/8bAHgnE2tSg2wYBdAyZ0cu2yQta9kL1IhcBmJAllVAB9Byw7JgAOmfaN4Kq8v69YLu1YYvYQVRXNsT4JsY1AOr1ATuMJZt9Mq2CNXzIjXETQAS3PGDPf+qYUkGpXx2JbPiAVNGZlZ76lNIxCgCrH+vs+xa04KSBUFihfQTn6JxIgVRBjntl/V7AkYmHMM9EOl/gbvTB5Tig7uQjBFLJDp8xpjobDrzdsJU/tIOV2/m4iRow1tgZ7gGsUQCSKvWbBEB3S75snBOsEnl+ZwCBB+ABeAAegAfgAXgAHoAH4AF4AB6AB+ABeAAegAfgAXgA30oKGcC6QidRjfZ1s0y+rvfe7SYV2i82ACDzaqg5sDvh8y/NAeTS9zrtbzXbTsocxTYIxpyjg5O9QP2Vd0jtHgBwpqkFU+n7THMSz8LqJxpac01jHck+gFcypc5S1gQq11xRcVD8xjXG576iBk3kpGlo4EhjBXO830sVtYUzU3/I122BIr9VLSexkcyMV8lMuMwY6+wg2+M2eEU9D7YnXHCfnOi4M7sLGjU+MPnRlnHLksGssn2JlSUApjiQBjrFxQppgBGc36XkBIfihZD2VtYpVAYjtA2Df+n2IuRncQWp3lxYEP79NfibUqtqwl8AdlEvQHJBnWZN3AtLAKxGS4X6pVqtAkvJyycBAAifFYOJFY6vUMP1OcFpSfaUGO4/BxCjGd62QuGFhf7jwEKGty0AmYHwdJe4kFm6HwBsdmrxWnHFmP2od4MTi1pQJWY/LgBowaPF6yWu5Rf/9zwAYWpu0xTO4YFIH07Rhji1G7QUYvJQWLUrePQ6k8hxt+mE7M0WR/Cy3mYSApwIUEzAcQtATTgRbqEHZxEK2xJEgKmgGU6ZgPWnwvxPDSo9YXt16p7gtwADAJ0MMQbgqvfXAAAAAElFTkSuQmCC') no-repeat left center transparent;
 background-size: 100% 100%;
}

Example:

You can change the style to fit to your site design but just remember to leave the Tag of the Base64 Renteres image intact.

Enable Feed

Enabling the Feed Feature in your site is simple and requires only a few simple steps.
1. Loging to your Renteres account as shown below:

2. You are now logged in your manager board.
In the left bar you have the “Setting Website” section, press on it.

3. A new window will be shown to you.
In this windows you have the ability to check Feed for PC and Feed for mobile.

We stongly recomend you to check both options in order to make your users more engaged to your site no matter where they are.

Enable In-Line Feed Feature

Enabling the In-Line Feed Feature on your site requires you to insert new HTML tags inside your site.

To begin you need to be logged in to your account and in the “Setting Website” section as shown in the Feed above.

In the “Setting Website” you can locate a navigation bar on the top of the selections Side Feed, Inline Feed and Button Line.

Press the “Inline Feed” option and a new window will appear Inline Feed Controller:

x

Underneath the form you will see an example of how the actual In-Line Feed will look when you add it to your site with your own modifications from the form.

 

Generic Code example you can Copy & Paste into your site:

 <div id="inline-feed-renteres" type="nemesis-2" title_text="Best comments" showAd="true" line="false" line_color="#2c579c" desktop="true" mobile="true" tablet="true"> </div>

 

In-Line Feed Type – Here you can choose from the drop-down menu how you want the In-Line Feed structure to look.
Nemesis: Display a 100% stretch row div of the In-Line Feed with a second line underneath it that shows one Ad in the center.
Nemesis-2: Display one 100% stretch row div of the In-Line Feed with an Ad on the right.

Mode: Enabling it will make the In-Line Feed visible

Show Ad: Enabling it will make the Ad visible

Line Color: checking this box will add a line above the In-Line Feed with the color you desire from the picker on the right.
We recommend you to choose the main theme color of your website

Devices: Enable the devices you desire In-Line Feed will work in

After you’ve finished entering the settings you want on your site a generated code will appear at the bottom. Click on “Copy the code” and paste it in the desired place on your site where you want the In-Line Feed to be shown.