# How to Install

####   



#### Intro

<div id="bkmrk-"></div>##### Welcome to the installation tutorial for the eCard Widget, a dynamic simple digital business card solution designed for seamless integration with your website. The eCard Widget allows users to create and embed a personalized, interactive business card that includes their profile picture, contact details, social media links, and more, all in a visually appealing format that can be iframed elsewhere.

Whether you're a developer or a site owner, this guide will walk you through the steps to set up and deploy the eCard Widget, ensuring that it works smoothly and integrates effortlessly with your existing platform. Follow the instructions below to get started and provide your users with a professional and customizable way to share their contact information online.

PS: If you installed this addon before, you will need to delete all files and start from zero because I redesigned the links and menu in a way that makes more sense to users.

The demo is in our community at **[ScriptsTribe, Click here to visit and If you need help reach me out there.](https://community.scriptstribe.com/widgets)**

E.g: users will need to click on the widget menu and choose what they want to use, I did it that way because if in te future you buy any other widget from me you will not need to add too many links in the menu. that a look at the last picture here and you will understand.

this tutorial is in your folder but if in the future you need to reinstall you can also find it online **[by clicking here](https://howto.scriptstribe.com/books/wowonder-business-card/page/how-to-install/)**.

**[![widget2.png](https://howto.scriptstribe.com/uploads/images/gallery/2024-10/scaled-1680-/YoZvxC6SQIQZzOjf-widget2.png)](https://howto.scriptstribe.com/uploads/images/gallery/2024-10/YoZvxC6SQIQZzOjf-widget2.png)**

- ##### **<span style="color: rgb(186, 55, 42);">Red is for wowonder theme</span>**
- ##### **<span style="color: rgb(53, 152, 219);">Blue is for sunshine theme</span>**

---

#### **Step 1**

1. ##### Upload the files following the zip structure
2. ##### Upload the api.php file to the root directory of your site

#### **Step 2: Open and edit root files first**

##### Open .htaccess and Add

```
# **** BUSINESS CARD WIDGET****

# **** WIDGETS****
RewriteRule ^widgets(/?|)$ index.php?link1=widgets [QSA]
RewriteRule ^widgets/ecard(/?|)$ index.php?link1=ecard [NC,QSA]
RewriteRule ^widgets/get-ecard(/?|)$ index.php?link1=get-ecard [NC,QSA]
```

##### Open index.php and add around page 892

```
                case 'widgets':
                include('sources/widgets/widgets.php');
				break;
				
				case 'ecard':
                include('sources/widgets/ecard.php');
				break;
				
				case 'get-ecard':
                include('sources/widgets/get-ecard.php');
				break;
```

#### **<span style="color: rgb(0, 0, 0);">Step 3: Edit theme files</span>**

##### **<span style="color: rgb(186, 55, 42);">For Wowonder theme: open themes/yourtheme/layout/timeline/content.phtml and look for around line 1305</span>**

```
<p class="page-margin"><?php echo $wo['user_profile']['about']; ?></p>
				
			</div>
        <?php } ?>
```

##### <span style="color: rgb(53, 152, 219);">**For Sunshine Theme around line 1442**</span>

```
  <?php if(!empty($wo['user_profile']['about'])) {  ?>
			<div class="page-margin wow_content">
				<div class="wo_page_hdng profile_hdng_side pag_neg_padd">
					<div class="wo_page_hdng_innr"><?php echo $wo['lang']['about']; ?></div>
				</div>
				<p class="page-margin mt-0"><?php echo $wo['user_profile']['about']; ?></p>
			</div>
        <?php } ?>
```

##### and after that add 

```
<?php echo Wo_LoadPage('widgets/profile-ecard');?>
```

##### Open theme/youtheme/layout/header/loggedin-header.phtml and add the next code where you want to show in the menu I placed it right after the general settings on **<span style="color: rgb(53, 152, 219);">sunshine</span>** and **<span style="color: rgb(186, 55, 42);">wowonder</span>**

```
 <li>
            <a href="<?php echo $wo['config']['site_url'];?>/widgets/">
           <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <rect x="2" y="3" width="20" height="18" rx="2" ry="2"></rect>
  <line x1="16" y1="8" x2="16" y2="8"></line>
  <line x1="8" y1="8" x2="12" y2="8"></line>
  <line x1="8" y1="12" x2="16" y2="12"></line>
  <line x1="8" y1="16" x2="16" y2="16"></line>
</svg>
 My Widgets
            </a>
         </li>	
```

#### <span style="color: rgb(22, 145, 121);">**Done nice and easy hum? Now visit yousite.com/widgets**</span>

[![widget.png](https://howto.scriptstribe.com/uploads/images/gallery/2024-10/scaled-1680-/wb4VzrUYTOl8KV9q-widget.png)](https://howto.scriptstribe.com/uploads/images/gallery/2024-10/wb4VzrUYTOl8KV9q-widget.png)